layui 和springMvc文件图片上传

最新推荐文章于 2023-02-25 19:53:57 发布

Lyf_uglyMonster

最新推荐文章于 2023-02-25 19:53:57 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/Lyf_uglyMonster/article/details/80014661

版权

1.准备工作

--：导入整合ssm的jar包

--：导入layui样式文件和js 文件等

（layui文件上传可以参考：http://www.layui.com/doc/modules/upload.html）

--：在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>