使用Ajax在一个表单中上传数据和文件?

我正在使用jQuery和Ajax为我的表单提交数据和文件，但我不知道如何在一个表单中发送数据和文件?

我目前做的几乎相同的两个方法，但数据收集到数组的方式是不同的，数据使用.serialize();但是文件使用= new FormData($(this)[0]);

是否有可能结合这两种方法，以便通过Ajax以一种形式上传文件和数据?

数据jQuery, Ajax和html

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

jQuery, Ajax和html文件

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

如何结合上述内容，以便通过Ajax以一种形式发送数据和文件?

我的目标是能够发送所有这些表单在一个帖子与Ajax，这是可能的吗?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

当前回答

编辑:在新版本的JQuery(3.6)中，你也可以尝试使用contentType函数参数来代替enctype。试试contentType: multipart/form-data。

对我来说，如果Ajax请求中没有enctype: 'multipart/form-data'字段，它就无法工作。我希望它能帮助那些陷入类似问题的人。

尽管在表单属性中已经设置了enctype，但由于某些原因，Ajax请求在没有显式声明的情况下无法自动识别enctype (jQuery 3.3.1)。

// Tested, this works for me (jQuery 3.3.1)

fileUploadForm.submit(function (e) {   
    e.preventDefault();
    $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                console.log('Thank God it worked!');
            }
        }
    );
});

// enctype field was set in the form but Ajax request didn't set it by default.

<form action="process/file-upload" enctype="multipart/form-data" method="post" >
     
     <input type="file" name="input-file" accept="text/plain" required> 
     ...
</form>

正如上面提到的，请特别注意contentType和processData字段。

2019-02-06 01:29:48

其他回答

我在ASP中也遇到了同样的问题。Net MVC和HttpPostedFilebase，而不是在提交上使用表单，我需要使用按钮，点击，我需要做一些事情，然后如果都OK，提交表单，这是我如何让它工作

$(".submitbtn").on("click", function(e) {

    var form = $("#Form");

    // you can't pass Jquery form it has to be javascript form object
    var formData = new FormData(form[0]);

    //if you only need to upload files then 
    //Grab the File upload control and append each file manually to FormData
    //var files = form.find("#fileupload")[0].files;

    //$.each(files, function() {
    //  var file = $(this);
    //  formData.append(file[0].name, file[0]);
    //});

    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: $(form).prop("action"),
            //dataType: 'json', //not sure but works for me without this
            data: formData,
            contentType: false, //this is requireded please see answers above
            processData: false, //this is requireded please see answers above
            //cache: false, //not sure but works for me without this
            error   : ErrorHandler,
            success : successHandler
        });
    }
});