如何解決Ajax圖片上傳問題：表單提交失敗和檔案選擇問題？

Ajax 映像上傳

本文解決了有關將圖片上傳的標準 HTML 表單轉換為 Ajax 實作的查詢。使用者面臨兩個具體的挑戰：表單提交時缺乏功能以及缺少觸發上傳過程的文件選擇。

問題： Ajax 表單提交失敗且檔案選擇未啟動

解決方案：

1. 解決方案：
2. 解決方案：

解決方案：

解缺少Ajax 成功和錯誤處理

$(document).ready(function (e) {
    $('#imageUploadForm').on('submit', (function (e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log("success");
                console.log(data);
            },
            error: function (data) {
                console.log("error");
                console.log(data);
            }
        });
    }));

    $("#ImageBrowse").on("change", function () {
        $("#imageUploadForm").submit();
    });
});

：初始程式碼缺少Ajax中的成功和錯誤處理功能稱呼。透過包含這些函數，開發人員可以確定 Ajax 呼叫是否成功或是否遇到任何錯誤。

在選擇檔案時啟動上傳

：選擇檔案後立即啟動上傳過程，我們可以利用檔案輸入欄位上的變更事件（#ImageBrowse）。當使用者選擇檔案時，會觸發此事件，然後提交表單，啟動 Ajax 上傳。

• 修改後的程式碼：

額外注意：額外注意：確保表單中的enctype 屬性設定為multipart/form-data，以便正確處理檔案上傳。 FormData 物件用於準備提交的表單數據，包括所選文件。 contentType 和 processData 設定為 false 以防止 jQuery 幹擾表單資料。

以上是如何解決Ajax圖片上傳問題：表單提交失敗和檔案選擇問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！