FormData對象，是可以使用一系列的鍵值對來模擬一個完整的表單，然后使用XMLHttpRequest發送這個"表單"。
在 Mozilla Developer 網站 使用FormData對象 有詳盡的FormData對象使用說明。
但上傳文件部分只有底層的XMLHttpRequest對象發送上傳請求，那么怎么通過jQuery的Ajax上傳呢？
本文將介紹通過jQuery使用FormData對象上傳文件。
使用<form>表單初始化FormData對象方式上傳文件
HTML代碼
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
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對象，不需要對數據做處理。<form>標簽添加enctype="multipart/form-data"屬性。cache設置為false，上傳文件不需要緩存。contentType設置為false。因為是由<form>表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這里設置為false。
上傳后，服務器端代碼需要使用從查詢參數名為file獲取文件輸入流對象，因為<input>中聲明的是name="file"。
如果不是用<form>表單構造FormData對象又該怎么做呢？
使用FormData對象添加字段方式上傳文件
HTML代碼
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
這里沒有<form>標簽，也沒有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]中可以看到一個<input type="file">標簽能夠上傳多個文件，
只需要在<input type="file">里添加multiple或multiple="multiple"屬性。
服務器端讀文件
從Servlet 3.0 開始，可以通過 request.getPart() 或 request.getPars() 兩個接口獲取上傳的文件。
這里不多說，詳細請參考官網教程 Uploading Files with Java Servlet Technology 以及示例 The fileupload Example Application
參考
作者：Agreal
鏈接：http://www.jianshu.com/p/46e6e03a0d53
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。