FormData是表單數據我們用來提交表格的數據,FormData對象允許我們對表單數據進行操作,下面錯新技術頻道小編給大家分享jQuery Ajax使用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對象上傳文件的方法,看完后你感覺有不懂的地方嗎?如果有疑問就請聯系我們。
新聞熱點
疑難解答
圖片精選