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"屬性。
后臺接收文件：
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="utf-8"/></bean>@RequestMapping(value = "/import_tg_resource")public ModelAndView import_tg_resource(@RequestParam(value = "file", required = false) MultipartFile[] files, HttpServletRequest request, ModelMap model) {System.out.println("開始批量上傳:文件數量：" + files.length);for (MultipartFile file : files ) {String path = request.getSession().getServletContext().getRealPath("upload");String fileName = file.getOriginalFilename();String prefix = fileName.substring(fileName.lastIndexOf("."));fileName = new Date().getTime() + prefix;// System.out.println("保存路徑 " + path);File targetFile = new File(path, fileName);if(!targetFile.exists()){targetFile.mkdirs();}file.transferTo(targetFile);}}以上所述是小編給大家介紹的jQuery Ajax使用FormData對象上傳文件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
