ajax 使用 FormData 提交表单

Question

我试图只提交一个非常大的表单的特定输入，我想使用 ajax 来做到这一点。我有这个，它工作正常。这将在#someDiv.

中提交所有输入

$(".save").click(function () {

    dat = $.param($('#someDiv').find('input'));

    $.ajax({
        type: "POST",
        url: "...",
        data: dat,
        success: function(data) {
            //success
        }
    });
});

然后我想起其中一些输入是文件输入，所以这不起作用。我做了一些研究，发现使用 FormData 是可行的方法：

$(".save").click(function () {

    dat = new FormData($('#someDiv').find('input'));

    $.ajax({
        type: "POST",
        url: "...",
        data: dat,
        processData: false,
        contentType: false,
        success: function(data) {
            //success
        }
    });
});

但是这个函数不起作用，成功函数正在触发但没有保存任何东西所以我假设没有正确创建 FormData。有任何想法吗？提前致谢

Answer 1

您不能创建如下的 formData

dat = new FormData($('#someDiv').find('input'));

您需要将 Javascript 表单引用传递给表单，例如，如果表单的 ID 为 singupForm，则按如下所示进行操作

dat = new FormData($('#singupForm')[0]);

编辑

如果您只想添加选定的字段，您可以按照以下步骤进行操作

    var formData = new FormData();
    formData.append("variable", "First Value");
    formData.append("integerVariable", 987654321); 

    // For file, remember to pass the JavaScript reference
    formData.append("userfile", fileInputElement.files[0]);

ajax 使用 FormData 提交表单

ajax submitting forms using FormData

javascript

jquery

ajax

forms

multipartform-data