如何解決AJAX圖片上傳問題：表單提交和觸發上傳？

啟用Ajax 的映像上傳

嘗試將表單轉換為AJAX 進行影像上傳時，您可能會遇到表單無回應的問題提交或文件選擇不觸發上傳功能。以下是解決方案的詳細說明：

解決表單提交問題

原始 JavaScript 程式碼在 AJAX 呼叫中缺乏正確的錯誤和成功處理。要解決此問題，請新增以下內容：

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 上傳。

完整程式碼片段

結合上述解決方案，您的最終 JavaScript 程式碼應該如下所示：

$(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圖片上傳問題：表單提交和觸發上傳？的詳細內容。更多資訊請關注PHP中文網其他相關文章！