SSM實現檔案、圖片的批量上傳
阿新 • • 發佈：2019-02-16
今天一個新來的同事要寫批量上傳圖片的介面，但是他沒做過檔案上傳，我就想到前端時間自己做過pdf檔案的上傳，碰巧我自己手頭上功能已經做完，他又毫無頭緒，就自己試了一下，在自己之前做的上傳pdf檔案上進行修改成批量上傳圖片，這個對批量上傳任何檔案都適用。
1.在springMVC.xml的配置檔案新增multipartResolver
<!-- 檔案上傳 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding"> <value>UTF-8</value> </property> <property name="maxUploadSize"> <value>32505856</value><!-- 上傳檔案大小限制為31M，31*1024*1024 --> </property> <property name="maxInMemorySize"> <value>4096</value> </property> </bean>
2.在Controller層寫上程式碼：
// 批量上傳檔案 @RequestMapping("/uploadPicture") public @ResponseBody ResultObject uploadPicture(@RequestParam MultipartFile[] files, HttpServletRequest request, int id) throws IOException { SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS"); String res = sdf.format(new Date()); ResultObject retObj = ResultObject.getFailResultObject(); Map<String, Object> model = new HashMap<String, Object>(2); int flag = 0; String msg = "上傳失敗"; // uploads資料夾位置 String rootPath = request.getSession().getServletContext().getRealPath("WEB-INF/upload"); // 建立年月資料夾 Calendar date = Calendar.getInstance(); File dateDirs = new File(date.get(Calendar.YEAR) + File.separator + (date.get(Calendar.MONTH) + 1)); // 原始名稱 for (int i = 0; i < files.length; i++) { MultipartFile file = files[i]; // 獲取檔名 String fileName = file.getOriginalFilename(); System.out.println(fileName); File newFile = new File(rootPath + File.separator + dateDirs + File.separator + fileName); // 判斷目標檔案所在目錄是否存在 if (!newFile.getParentFile().exists()) { // 如果目標檔案所在的目錄不存在，則建立父目錄 newFile.getParentFile().mkdirs(); } // 將記憶體中的資料寫入磁碟 file.transferTo(newFile); // 完整的url String fileUrl = date.get(Calendar.YEAR) + "/" + (date.get(Calendar.MONTH) + 1) + "/" + fileName; System.out.println("fileUrl:" + fileUrl); msg = "上傳成功"; } model.put("flag", flag); model.put("msg", msg); retObj.setData(model); return retObj; }
3.編寫一個html檔案測試：
<html> <head> <meta charset="UTF-8"> <title>file upload</title> </head> <body> <form action="http://localhost:8080/專案名/controller路徑/uploadPicture" method="post" enctype="multipart/form-data"> <span>使用者名稱</span> <input type="text" name="name"/><br/> <span>文 件1</span> <input type="file" name="files"/><br/> <span>文 件2</span> <input type="file" name="files"/><br/> <span>文 件3</span> <input type="file" name="files"/><br/> <input type="submit" value="提交"> </form> </body> </html>