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。這樣做是為了使檔案可以傳送到伺服器並由伺服器正確處理。