如何处理Ajax图片上传的提交和更改事件？

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中文网其他相关文章！