Form上傳多圖片
阿新 • • 發佈：2019-02-12
<span style="white-space:pre"> </span> /** * 獲取多個檔案，，注意問題：<br> * 1.表單無需屬性enctype="multipart/form-data"<br> * 2.前臺使用XMLHttpRequest物件或ajax傳送資料<br> * 3.前臺使用FormData物件獲取多個檔案 * @param request * @return * @throws Exception */ @RequestMapping("/multi/save.do") public String save(HttpServletRequest request) throws Exception{ //轉為MultipartHttpServletRequest MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; //獲取所有的檔案 Map map = multipartRequest.getFileMap(); MultipartFile multipartFile = null; for (Iterator i = map.keySet().iterator(); i.hasNext();) { DemoMultiPhoto photo = new DemoMultiPhoto(); Object obj = i.next(); multipartFile = (MultipartFile) map.get(obj); //獲取檔名稱 String fileName = multipartFile.getOriginalFilename(); //獲取檔案內容，二進位制傳送過來的 byte[] content = multipartFile.getBytes(); photo.setName(fileName); photo.setPhotoParentId(content); multiFileService.doSave(photo); } return "multiFile"; } /** * 只能獲取單個檔案(其他檔案被覆蓋)，注意問題：<br> * 1.表單屬性enctype="multipart/form-data"，二進位制流傳送資料<br> * 2.表單檔案控制元件必須有name屬性<br> * 3.後臺接受檔案控制元件時，型別不是String，而是{@link MultipartFile}，否則接受資料為null<br> * 4.HttpServletRequest轉為MultipartHttpServletRequest，否則接受資料為null<br> * 5.只能獲取一個檔案，其他檔案被覆蓋(key不能重複) * @param request * @param name * @param ph 物件必須為{@link MultipartFile} * @return * @throws Exception */ @RequestMapping("/multi/save2.do") public String save2(HttpServletRequest request, String name, MultipartFile ph) throws Exception{ //轉為MultipartHttpServletRequest MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; //遍歷上傳的多檔案，其map的Key值是file控制元件的name屬性，所以只能儲存單個檔案(key不重複，被覆蓋) Map map = multipartRequest.getFileMap(); MultipartFile multipartFile = null; for (Iterator i = map.keySet().iterator(); i.hasNext();) { DemoMultiPhoto photo = new DemoMultiPhoto(); Object obj = i.next(); multipartFile = (MultipartFile) map.get(obj); //獲取檔名稱 String fileName = multipartFile.getOriginalFilename(); //獲取檔案內容，二進位制傳送過來的 byte[] content = multipartFile.getBytes(); photo.setName(fileName); photo.setPhotoParentId(content); multiFileService.doSave(photo); } return "multiFile"; }
對應JSP：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <jsp:include page="inc.jsp" flush="true"></jsp:include> <title>MultiFile 多圖片上傳</title> <meta charset="utf-8"> <script type="text/javascript"> function upload(){ var xhr = new XMLHttpRequest(); var form = new FormData(); var files = document.getElementById("file2").files; var name = $("#name2").val(); form.append("name",name); for(var i=0; i< files.length; i++){ form.append(files[i].name,files[i]); } xhr.open("POST","<%=request.getContextPath()%>/multi/save.do"); xhr.send(form); } </script> </head> <body> <form id="form1" action="javascript:upload();" method="post"> <label>使用者：</label> <input type="text" id="name1" style="border:2px solid red;" name="name"/><br> <label>圖片：</label> <input type="file" id="file1" multiple="multiple" style="border:2px solid red;" name="ph"/> <p class="help-block">支援jpg、jpeg、png、gif格式，大小不超過5.0M</p> <button type="submit" style="border: 2px solid red;">上傳1</button> </form> <form id="form2" action="<%=request.getContextPath()%>/multi/save2.do" method="post" enctype="multipart/form-data"> <label>使用者：</label> <input type="text" id="name2" style="border:2px solid red;" name="name"/><br> <label>圖片：</label> <input type="file" id="file2" multiple="multiple" style="border:2px solid red;" name="ph"/> <p class="help-block">支援jpg、jpeg、png、gif格式，大小不超過5.0M</p> <button type="submit" style="border: 2px solid red;">上傳2</button> </form> </body> </html>