基於spring 的ssi-uploader的多圖片上傳
阿新 • • 發佈：2018-12-02
今天幫一個朋友做了一個多圖片上傳的demo，前端外掛用的是ssi-uploader，後臺是spring，詳細看程式碼：
package com.controller; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Map; import javax.servlet.ServletContext; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; import org.springframework.web.multipart.commons.CommonsMultipartFile;
@Controller @RequestMapping("upload") public class FileUploadUtil { @Autowired private FileUploadUtilService service; @RequestMapping("testFileUpload") @ResponseBody public String testFileUpload(HttpServletRequest request,HttpServletResponse response,Map<String, Object> model){ MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request; Map<String, MultipartFile> files = Murequest.getFileMap();//得到檔案map物件 String upaloadUrl ="D:/upload/photo/";//得到當前工程路徑拼接上檔名 File dir = new File(upaloadUrl); if(!dir.exists())//目錄不存在則建立 dir.mkdirs(); for(MultipartFile file :files.values()){ String fileName=file.getOriginalFilename();//相片的名字 File tagetFile = new File(upaloadUrl+fileName);//建立檔案物件 if(!tagetFile.exists()){//檔名不存在 則新建檔案，並將檔案複製到新建檔案中 try { tagetFile.createNewFile(); } catch (IOException e) { e.printStackTrace(); } try { file.transferTo(tagetFile);//到這裡就可以上傳了，以下是處理圖片及允許gif的上傳 //圖片副檔名 String types=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase(); //以1024*768大小改變圖片,如果是gif則放開限制，如果需要儲存原圖則不需要處理 if(!types.contains("gif")){ // Thumbnails.of(tagetFile).size(1024,768).toFile(tagetFile); } } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } } return "根據需要返回的頁面"; } }
前端頁面：
<%@ page language="Java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; String error = (String) request.getAttribute("error0"); %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/ssi-uploader.css"/> <script src="${pageContext.request.contextPath}/js/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="${pageContext.request.contextPath}/js/ssi-uploader.js"></script> </head> <body> <!--右半部分--> <div class="right"> <!--頭部導航欄--> <div class="right_top"> <p id="location">位置>圖片上傳</p> <a href="${pageContext.request.contextPath}/admin/exit"><p id="exit">退出</p></a> </div> <!--右部主要內容--> <div class="right_main"> <!--圖片上傳--> <div class="row"> <div class="col-md-12"> <h3>圖片上傳：</h3> <input type="file" multiple id="ssi-upload3"/> <input type="hidden" id="albumId" value="3"/> </div> </div> <script type="text/javascript"> //下一行的url即為你後臺所走的action路徑 $('#ssi-upload3').ssi_uploader({url:'<%=request.getContextPath() %>/upload/testFileUpload.action',dropZone:false,allowed:['jpg','gif','txt','png','pdf']}); </script> </div> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.1.min.js"></script> <script type="text/javascript"> $(".menu dt").css({"background-color":"#404040"}); $(".menu dt img").attr("src","images/left/select_xl01.png"); $(function(){ $(".menu dd").hide(); $(".menu dt").click(function(){ $(".menu dt").css({"background-color":"#404040"}) $(this).css({"background-color": "#FF5258"}); $(this).parent().find('dd').removeClass("menu_chioce"); $(".menu dt img").attr("src","images/left/select_xl01.png"); $(this).parent().find('img').attr("src","images/left/select_xl.png"); $(".menu_chioce").slideUp(); $(this).parent().find('dd').slideToggle(); $(this).parent().find('dd').addClass("menu_chioce"); }); }) </script> </body> </html>
最後別忘了要註解spring的MultipartResolver
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize"> <value>104857600</value> </property> <property name="maxInMemorySize"> <value>4096</value> </property> <property name="defaultEncoding"> <value>UTF-8</value> </property> </bean>
附上檔案下載連結：點選開啟連結