layui 和springMvc檔案圖片上傳
阿新 • • 發佈：2019-02-01
1.準備工作
--：匯入整合ssm的jar包
--：匯入layui樣式檔案和js 檔案等
--：在mysql 中建立一個表 Picture,用於儲存圖片路徑，名稱等資料
--：新建一個上傳圖片的頁面layuiUpload.jsp
--：新建一個控制器LayUploadController.class
2. spring配置檔案，mybatis 程式碼
--：在spring容器中新增檔案上傳的bean,和其他相關配置
-- ：新增sql 用於將圖片資訊儲存到資料庫
3.說明：
檔案上傳到Tomcat伺服器中，路徑為：
基本路徑\.metadata\.plugins\org.eclipse.wst.server.core\tmp3\wtpwebapps\專案名稱\imag，
我們可以通過在瀏覽器輸入：http://localhost:8080/專案名稱/imag/檔名，訪問到檔案。
1.1工程匯入ssm整合jar包（可能有些是不必要的），和ssm整合（略）
1.2 下載layui 相關js ，css 等（eclipse自檢問題，會有一個紅叉，但是不影響工程的執行）
1.3在mysql中建立表picture用來儲存圖片的基本資料
1.4在WEN-INF 目錄下建立一個圖片上傳的頁面layuiUpload.jsp
layuiUpload.jsp：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- 引入外部樣式等 --> <link rel="stylesheet" href="../layui/css/layui.css" media="all"> <script src="../layui/layui.js"></script> <script src="../layui/jquery-3.2.1.min.js"></script> <title>upload</title> </head> <body> <button type="button" class="layui-btn" id="test1"> <i class="layui-icon"></i>上傳圖片 </button> <button type="button" class="layui-btn" id="test2"> <i class="layui-icon"></i>上傳 </button> <div id="d"></div> <%-- <a href="${pageContext.request.contextPath}/layuis/f.do" class="layui-btn">檢視已經上傳的圖片</a> <c:forEach var="picture" items="${pictureList }" > <img src="${pageContext.request.contextPath}/${picture.path}"> </c:forEach> --%> <script> var layers; layui.use('layer', function(){ layers= layui.layer; }); layui.use('upload', function(){ var upload = layui.upload; var i=0;//上傳成功個數 var m=0;//選擇檔案個數 //執行例項 var uploadInst = upload.render({ elem: '#test1', //繫結元素，點選id為test1 的時候彈出選擇檔案視窗 url: '${pageContext.request.contextPath}/layuis/upload.do', //上傳介面，和普通ajax一樣 bindAction:'#test2',//執行檔案上傳動作 auto: false, //選擇檔案後不自動上傳 multiple:true, //開啟多檔案上傳 number:5, //同時上傳數量 choose: function(obj){ //將每次選擇的檔案追加到檔案佇列 var files = obj.pushFile(); //預讀本地檔案，如果是多檔案，則會遍歷。(不支援ie8/9) obj.preview(function(index, file, result){ console.log("index"+index); //得到檔案索引 console.log(file); //得到檔案物件 console.log(result); //得到檔案base64編碼，比如圖片 /* 頁面顯示圖片 */ $('#d').append('<img src='+ result +'>'); }); } ,before: function(obj){ //obj引數包含的資訊，跟 choose回撥完全一致，可參見上文。 layers.load(); //上傳loading } ,allDone: function(obj){ //當檔案全部被提交後，才觸發 console.log(obj.total); //得到總檔案數 console.log(obj.successful); //請求成功的檔案數 console.log(obj.aborted); //請求失敗的檔案數 if(obj.total==i){ layers.closeAll('loading'); layers.msg("全部上傳成功",{time:2000}); //function () { // parent.location.reload(); //重新整理父頁面 第二個引數設定msg顯示的時間長短 //} } } //請求回撥函式 ,done:function(res,index,upload){ if(res.code==0){//上傳成功 i++; console.log(i); } } ,error: function(){ layer.msg('上傳失敗'); layers.closeAll('loading'); } }); }); </script> </body> </html>
1.5新建一個控制器LayUploadController.class 用來後臺接收檔案並處理
package cn.upload.controller; import java.io.File; import java.io.IOException; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.Map; import java.util.Random; import java.util.UUID; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; 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 cn.upload.dao.PictureDao; @Controller @RequestMapping("/layuis") public class LayUploadController { @Resource private PictureDao pictureDao; // @Resource //由於頁面放在WEB-INF 下不能直接訪問 @RequestMapping("/f") public String s(HttpServletRequest request){ // 從資料庫中查詢出上傳後的路徑列表 /* 在頁面使用 <c:forEach var="picture" items="${pictureList }" > <img src="${pageContext.request.contextPath}/${picture.path}"> </c:forEach>*/ // List<Picture> pictureList=pictureDao.getPictureList(); // for(Picture picture:pictureList){ // System.out.println(picture.getPath()); // } // request.setAttribute("pictureList",pictureList); // System.out.println("==="); // System.out.println("==="); return "/layuiUpload"; } @ResponseBody @RequestMapping(value="upload",method=RequestMethod.POST) public Map<String,Object> upString(HttpServletRequest request) throws Exception{ System.out.println("up"); Map<String,Object> resultMap=new HashMap<String, Object>(); Map<String,Object> Map=new HashMap<String, Object>(); MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();//檔案集合 // if(!file.isEmpty()){ //上傳檔案路徑 String path=request.getSession().getServletContext().getRealPath("/imag");//"D:/javaspring框架/FileUpload/WebContent/WEB-INF/imag"; System.err.println(path); // 檢查目錄 File uploadDir = new File(path); if (!uploadDir.isDirectory()) { // 如果不存在，建立資料夾 if (!uploadDir.exists()) { uploadDir.mkdirs(); } } for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) { SimpleDateFormat df2 = new SimpleDateFormat("yyyyMMddHHmmss"); String date=df2.format(new Date()); System.err.println(date+"當前時間"); MultipartFile file2=entity.getValue(); String filename=file2.getOriginalFilename(); File filepath=new File(path,filename); //判斷路徑是否存在，如果不存在就建立一個 if(!filepath.getParentFile().exists()){ filepath.getParentFile().mkdirs(); } //重新命名 // 副檔名 String fileExt = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();//副檔名 Date date2=df2.parse(date); //新的檔名 String newFileName=date+"_"+new Random().nextInt(100)+"."+fileExt; System.err.println("新檔名："+newFileName); //request.getContextPath() //儲存的路徑 String Savepath="/imag/"+newFileName; System.out.println("儲存路徑"+Savepath); pictureDao.insertPicture(date2,newFileName,Savepath); //將上傳的檔案儲存到目標檔案中 file2.transferTo(new File(path+File.separator+newFileName)); System.out.println(path+File.separator+filename); resultMap.put("code",0); resultMap.put("msg","success"); Map.put("src",path); resultMap.put("data",Map); } return resultMap; }
2.1. spring配置檔案
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<context:property-placeholder location="classpath:jdbc.properties"/>
<!-- 掃描包 -->
<context:component-scan base-package="cn.upload.*"/>
<!-- json資料 -->
<mvc:annotation-driven/>
<!-- 檢視解析器 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/WEB-INF/content/"
p:suffix=".jsp"
></bean>
<!-- maxUploadSize： 上傳檔案大小上限，單位為位元組（10MB）
defaultEncoding： 請求的編碼格式，必須和jSP的pageEncoding屬性一致，以便正確讀取表單的內容，預設為ISO-8859-1
-->
<bean name="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
p:maxUploadSize="10485760"
p:defaultEncoding="UTF-8"
>
</bean>
<!-- 該異常是SpringMVC在檢查上傳的檔案資訊時丟擲來的，而且此時還沒有進入到Controller方法中 -->
<bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
<property name="exceptionMappings">
<props>
<!-- 遇到MaxUploadSizeExceededException異常時，自動跳轉到WebContent目錄下的error.jsp頁面 -->
<prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error</prop>
</props>
</property>
</bean>
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"
destroy-method="close"
p:driverClassName="${mysql.driver}"
p:url="${mysql.url}"
p:username="${mysql.username}"
p:password="${mysql.password}">
</bean>
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"
p:dataSource-ref="dataSource"
p:configLocation="classpath:mybatis-config.xml"
></bean>
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"
p:basePackage="cn.upload.dao"
p:sqlSessionFactoryBeanName="sqlSessionFactory">
</bean>
</beans>2.2 mapper 對映檔案
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.upload.dao.PictureDao">
<insert id="insertPicture" parameterType="map">
insert into picture (date,name,path) values(#{date},#{name},#{path})
</insert>
<select id="getPictureList" resultType="cn.upload.entity.Picture">
select * from picture
</select>
</mapper>