如何使用 jQuery AJAX 成功提交带有文件输入的表单？

如何使用 jQuery 序列化处理文件上传

在处理包含文件输入字段的表单时，使用 jQuery 的序列化函数进行 AJAX 提交可以提出挑战。传统的序列化方法无法有效处理文件输入，导致 $_FILES 数据为空。

解决方案：FormData 对象

要克服此限制，请使用 FormData 对象。 FormData 允许您捕获和序列化所有表单数据，包括文件输入。通过利用 FormData，您可以将文件无缝传递到 AJAX 请求。

代码示例：

$(document).on("submit", "form", function(event) {
    event.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status) {

        },
        error: function (xhr, desc, err) {

        }
    });        

});

在此示例中，我们从表单创建一个 FormData 对象并将 processData 和 contentType 选项设置为 false。这些选项阻止 jQuery 自动转换数据并设置内容类型，从而允许 FormData 处理文件上传过程。

以上是如何使用 jQuery AJAX 成功提交带有文件输入的表单？的详细内容。更多信息请关注PHP中文网其他相关文章！