FormData對象，是可以使用一系列的鍵值對來模擬一個完整的表單，然後使用XMLHttpRequest發送這個"表單"。
在 Mozilla Developer 網站 使用FormData對象 有詳盡的FormData對象使用說明。
但上傳文件部分只有底層的XMLHttpRequest對象發送上傳請求，那麼怎麼通過jQuery的Ajax上傳呢？本文將介紹通過jQuery使用FormData對象上傳文件。
HTML代碼
javascript代碼
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {}).fail(function(res) {});
這裡要注意幾點：
- processData設置為false。因為data值是FormData對象，不需要對數據做處理。
- 標籤添加enctype="multipart/form-data"屬性。
- cache設置為false，上傳文件不需要緩存。
- contentType設置為false。因為是由表單構造的FormData對象，且已經聲明瞭屬性enctype="multipart/form-data"，所以這裡設置為false。
上傳後，服務器端代碼需要使用從查詢參數名為file獲取文件輸入流對象，因為中聲明的是name="file"。
如果不是用
表單構造FormData對象又該怎麼做呢？
使用FormData對象添加字段方式上傳文件
HTML代碼
這裡沒有
標籤，也沒有enctype="multipart/form-data"屬性。
javascript代碼
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {}).fail(function(res) {});
這裡有幾處不一樣：
- append()的第二個參數應是文件對象，即$('#file')[0].files[0]。
- contentType也要設置為‘false’。
從代碼$('#file')[0].files[0]中可以看到一個標籤能夠上傳多個文件，只需要在裡添加multiple或multiple="multiple"屬性。
分享到:
