Ajax 文件上传

1.一个简单的完整例子

每次进行新文件选择时，我们都可以使用此示例代码上传用户选择的文件。

<input type="file" id="file-input" multiple>

var files;
var fdata = new FormData();
$("#file-input").on("change", function (e) {
    files = this.files;

    $.each(files, function (i, file) {
        fdata.append("file" + i, file);
    });

    fdata.append("FullName", "John Doe");
    fdata.append("Gender", "Male");
    fdata.append("Age", "24");

    $.ajax({
        url: "/Test/Url",
        type: "post",
        data: fdata, //add the FormData object to the data parameter
        processData: false, //tell jquery not to process data
        contentType: false, //tell jquery not to set content-type
        success: function (response, status, jqxhr) {
            //handle success
        },
        error: function (jqxhr, status, errorMessage) {
            //handle error
        }
    });
});

现在让我们分解它并逐个检查它。

2.使用文件输入

这个 MDN 文档（使用来自 Web 应用程序的文件） 是关于如何处理文件输入的各种方法的一个很好的阅读。在这个例子中也将使用其中一些方法。

在我们上传文件之前，我们首先需要让用户选择他们想要上传的文件。为此，我们将使用 file input。multiple 属性允许选择多个文件，如果你希望用户一次选择一个文件，则可以将其删除。

<input type="file" id="file-input" multiple>

我们将使用输入的 change event 来捕获文件。

var files;
$("#file-input").on("change", function(e){
    files = this.files;
});

在处理函数内部，我们通过输入的 files 属性访问文件。这给了我们一个 FileList ，它是一个类似于 object 的数组。

3.创建和填充 FormData

为了使用 Ajax 上传文件，我们将使用 FormData 。

var fdata = new FormData();

我们在上一步中获得的 FileList 是一个类似于对象的数组，可以使用各种方法迭代，包括 for 循环 ， for 循环和 jQuery.each 。在这个例子中我们将坚持使用 jQuery。

$.each(files, function(i, file) {
  //...
});

我们将使用 FormData 的 append 方法将文件添加到我们的 formdata 对象中。

$.each(files, function(i, file) {
  fdata.append("file" + i, file);
});

我们还可以添加我们想要以相同方式发送的其他数据。假设我们想要从用户那里收到一些个人信息以及文件。我们可以将此信息添加到我们的 formdata 对象中。

fdata.append("FullName", "John Doe");
fdata.append("Gender", "Male");
fdata.append("Age", "24");
//...

4.使用 Ajax 发送文件

$.ajax({
    url: "/Test/Url",
    type: "post",
    data: fdata, //add the FormData object to the data parameter
    processData: false, //tell jquery not to process data
    contentType: false, //tell jquery not to set content-type
    success: function (response, status, jqxhr) {
        //handle success
    },
    error: function (jqxhr, status, errorMessage) {
        //handle error
    }
});

我们将 processData 和 contentType 属性设置为 false。这样做是为了使文件可以发送到服务器并由服务器正确处理。