如何處理Ajax圖片上傳的提交和更改事件？-php教程-PHP中文網

如何處理Ajax圖片上傳的提交和更改事件？

Patricia Arquette

發布： 2024-12-15 19:34:17

原創

210 人瀏覽過

How to Handle Submit and Change Events for Ajax Image Uploads?

Ajax上傳：提交與更改事件處理

問題概述：
增強現有表單的利用Ajax進行圖片上傳，提供的程式碼似乎不完整，需要額外

解：

1.使用Ajax 實作表單提交：

在表單提交的事件處理程序中，提供的程式碼缺少重要元素：

成功與錯誤函數： Ajax需要成功和錯誤函數來處理來自server.
表單數據： 要發送表單數據，請使用formData = new FormData(this);並將contentType 和processData 設為false 以實現Ajax 相容性。

修改程式碼：

$('#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);
        }
    });
}));

登入後複製

2.在選取檔案時上傳上傳：

要在選擇檔案時啟動上傳，請在檔案輸入上使用變更事件：

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

登入後複製

透過這些修改，Ajax上傳功能將按預期工作。

以上是如何處理Ajax圖片上傳的提交和更改事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！