傳統(tǒng)的form表單提交會導(dǎo)致頁面刷新，但是在有些情況下，我們不希望頁面被刷新，這種時候我們都是使用Ajax的方式進行請求的。 我自己了解的實現(xiàn)文件上傳的比較好用的，有普通的Ajax提交文件方式、FilesUpload等，但是用了FormData后，覺得fromdata使用起來更加簡單便捷，所以在此給各位小伙伴們分享一下，不足之處還請各位伙伴提示，在此感謝！ 例如表單： 表單內(nèi)必須設(shè)enctype=”multipart/form-data”屬性。
<form id="add_news" method="post" enctype="multipart/form-data" > <input type="file" id="photo"><input type="file" id="photo2"><input type="file" id="photo3"><input type="text" id="photo4"><input type="text" id="photo5"></form>第一種提交方式：
//直接把整個Form表單內(nèi)容塞到FormData對象里面；var formElement = $("#add_news");var formData = new FormData(formElement);$.ajax({ url: '../image/customser.do', type: 'POST', data: formData, dataType: 'JSON', cache: false, PRocessData: false, contentType: false, success : function(data) { alert("上傳成功"); }, error:function(){ alert("上傳失敗"); } });第二種方式：
var formData = new FormData();//獲取普通input文本內(nèi)容formData.append("servicerid", $("#photo4").val());formData.append("servicerid", $("#photo5").val());//獲取圖片等文件formData.append("file", $("#photo1")[0].files[0]);formData.append("file", $("#photo2")[0].files[0]);formData.append("file", $("#photo3")[0].files[0]);$.ajax({ url: '../image/customser.do', type: 'POST', data: formData, dataType: 'JSON', cache: false, processData: false, contentType: false, success : function(data) { alert("上傳成功"); }, error:function(){ alert("上傳失敗"); } });后臺獲取：
@RequestMapping(value = "/image/customser.do")@ResponseBodypublic ResultObject uploadAuthImages(@RequestParam(value = "file", required = false) MultipartFile[] files, HttpServletRequest request) { Map<String, Object> map = new HashMap<String, Object>(); //保存文件 for(int i=0; i<files.length; i++){ String filePath = request.getsession().getServletContext().getRealPath("/") + "upload/"; UUID uuid = UUID.randomUUID(); String fileName = new Date().getTime() + uuid.toString() + ".jpg"; System.out.println("圖片地址："+filePath); File targetFile = new File(filePath, fileName); if (!targetFile.exists()) { targetFile.mkdirs(); } // 保存 try { files[i].transferTo(targetFile); } catch (Exception e) { e.printStackTrace(); } //添加圖片路徑到map集合 map.put("img"+i, "/upload/" + fileName); } map.put("photo4", request.getParameter("photo4")); map.put("photo5", request.getParameter("photo5")); return this.oneService.uploadAuthImages(map); }這里要注意幾點： 1、processData設(shè)置為false。因為data值是FormData對象，不需要對數(shù)據(jù)做處理。 2、標(biāo)簽添加enctype=”multipart/form-data”屬性。 3、cache設(shè)置為false，上傳文件不需要緩存。 4、contentType設(shè)置為false。因為是由表單構(gòu)造的FormData對象，且已經(jīng)聲明了屬性enctype=”multipart/form-data”，所以這里設(shè)置為false。 5、上傳后，服務(wù)器端代碼需要使用從查詢參數(shù)名為file獲取文件輸入流對象，因為中聲明的是name=”file”。 6、后臺：MultipartFile[] files 代表數(shù)組類型，獲取多文件上傳；如果是單文件上傳的話，MultipartFile file 就可以了。
新聞熱點
疑難解答
