springmvc上传图片并显示图片--支持多图片上传

Posted 林加欣

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了springmvc上传图片并显示图片--支持多图片上传相关的知识，希望对你有一定的参考价值。

实现上传图片功能在Springmvc中很好实现。现在我将会展现完整例子。

开始需要在pom.xml加入几个jar,分别是：

 

[java] view plain copy
  1. <dependency>  
  2.     <groupId>commons-fileupload</groupId>  
  3.     <artifactId>commons-fileupload</artifactId>  
  4.     <version>1.3.1</version>  
  5. </dependency>  
  6. <dependency>  
  7.     <groupId>commons-io</groupId>  
  8.     <artifactId>commons-io</artifactId>  
  9.     <version>2.4</version>  
  10. </dependency>  


接下来，在Springmvc的配置加入上传文件的配置（PS：我把springmvc的完整配置都展现出来）：

 

[html] view plain copy
  1. <!--默认的mvc注解映射的支持 -->  
  2. <mvc:annotation-driven/>  
  3. <!-- 处理对静态资源的请求 -->  
  4. <mvc:resources location="/static/" mapping="/static/**" />  
  5. <!-- 扫描注解 -->  
  6. <context:component-scan base-package="com.ztz.springmvc.controller"/>  
  7. <!-- 视图解析器 -->  
  8. <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
  9.        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>   
  10.        <!-- 前缀 -->  
  11.     <property name="prefix" value="/WEB-INF/jsp/"/>  
  12.     <!-- 后缀 -->  
  13.     <property name="suffix" value=".jsp"/>  
  14. </bean>  
  15. <!-- 上传文件 -->  
  16. <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
  17.     <property name="defaultEncoding" value="utf-8"/>  
  18.     <!-- 最大内存大小 -->  
  19.     <property name="maxInMemorySize" value="10240"/>  
  20.     <!-- 最大文件大小，-1为不限制大小 -->  
  21.     <property name="maxUploadSize" value="-1"/>  
  22. </bean>  

 

一、 单文件上传

当然在一个表单中，需要添加enctype="multipart/form-data"，一个表单有文件域，肯定也有基本的文本框，可以一次性提交，springmvc能给我们区别出来，来做不同的处理。首先看下普通的model

 

[java] view plain copy
  1. package com.ztz.springmvc.model;  
  2.   
  3. public class Users {  
  4.     private String name;  
  5.     private String password;  
  6.     //省略get set方法  
  7.       
  8.     //重写toString()方便测试  
  9.     @Override  
  10.     public String toString() {  
  11.         return "Users [name=" + name + ", password=" + password +  "]";  
  12.     }  
  13. }  


这个是表单的JSP页面：

 

[java] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
  2. <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>  
  3. <%  
  4. String path = request.getContextPath();  
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  6. request.setAttribute("basePath", basePath);  
  7. %>  
  8. <!DOCTYPE html>  
  9. <html>  
  10. <head>  
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  12. <title>FileUpload</title>  
  13. </head>  
  14. <body>  
  15. <form action="${basePath}file/upload" method="post" enctype="multipart/form-data">  
  16.     <label>用户名：</label><input type="text" name="name"/><br/>  
  17.     <label>密 码：</label><input type="password" name="password"/><br/>  
  18.     <label>头 像</label><input type="file" name="file"/><br/>  
  19.     <input type="submit" value="提  交"/>  
  20. </form>  
  21. </body>  
  22. </html>  

上传成功跳转的JSP页面，并且显示出上传图片：

 

[java] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
  2. <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>  
  3. <%  
  4. String path = request.getContextPath();  
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  6. request.setAttribute("basePath", basePath);  
  7. %>  
  8. <!DOCTYPE html>  
  9. <html>  
  10. <head>  
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  12. <title>头像</title>  
  13. </head>  
  14. <body>  
  15. <img src="${basePath}${imagesPath}">  
  16. </body>  
  17. </html>  


最后是Controller：

 

[java] view plain copy
  1. package com.ztz.springmvc.controller;  
  2.   
  3. import java.io.File;  
  4. import java.util.UUID;  
  5.   
  6. import javax.servlet.http.HttpServletRequest;  
  7.   
  8. import org.springframework.stereotype.Controller;  
  9. import org.springframework.web.bind.annotation.RequestMapping;  
  10. import org.springframework.web.bind.annotation.RequestMethod;  
  11. import org.springframework.web.bind.annotation.RequestParam;  
  12. import org.springframework.web.multipart.MultipartFile;  
  13.   
  14. import com.ztz.springmvc.model.Users;  
  15.   
  16. @Controller  
  17. @RequestMapping("/file")  
  18. public class FileUploadController {  
  19.       
  20.     @RequestMapping(value="/upload",method=RequestMethod.POST)  
  21.     private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile file,  
  22.             HttpServletRequest request)throws Exception{  
  23.         //基本表单  
  24.         System.out.println(users.toString());  
  25.           
  26.         //获得物理路径webapp所在路径  
  27.         String pathRoot = request.getSession().getServletContext().getRealPath("");  
  28.         String path="";  
  29.         if(!file.isEmpty()){  
  30.             //生成uuid作为文件名称  
  31.             String uuid = UUID.randomUUID().toString().replaceAll("-","");  
  32.             //获得文件类型（可以判断如果不是图片，禁止上传）  
  33.             String contentType=file.getContentType();  
  34.             //获得文件后缀名称  
  35.             String imageName=contentType.substring(contentType.indexOf("/")+1);  
  36.             path="/static/images/"+uuid+"."+imageName;  
  37.             file.transferTo(new File(pathRoot+path));  
  38.         }  
  39.         System.out.println(path);  
  40.         request.setAttribute("imagesPath", path);  
  41.         return "success";  
  42.     }  
  43.     //因为我的JSP在WEB-INF目录下面，浏览器无法直接访问  
  44.     @RequestMapping(value="/forward")  
  45.     private String forward(){  
  46.         return "index";  
  47.     }  
  48. }  


技术分享

点击提交控制台输出：

Users [name=fileupload, password=test]


浏览器显示结果：

技术分享


二、 多图片上传

springmvc实现多图片上传也很简单，我们把刚才的例子修改下，在加一个文件域，name的值还是相同

 

[java] view plain copy
  1. <body>  
  2. <form action="${basePath}file/upload" method="post" enctype="multipart/form-data">  
  3.     <label>用户名：</label><input type="text" name="name"/><br/>  
  4.     <label>密 码：</label><input type="password" name="password"/><br/>  
  5.     <label>头 像1</label><input type="file" name="file"/><br/>  
  6.     <label>头 像2</label><input type="file" name="file"/><br/>  
  7.     <input type="submit" value="提  交"/>  
  8. </form>  
  9. </body>  


展示图片来个循环，以便显示多张图片

 

[java] view plain copy
  1. <body>  
  2. <c:forEach items="${imagesPathList}" var="image">  
  3.     <img src="${basePath}${image}"><br/>  
  4. </c:forEach>  
  5. </body>  


控制层代码如下：

 

[java] view plain copy
  1. package com.ztz.springmvc.controller;  
  2.   
  3. import java.io.File;  
  4. import java.util.ArrayList;  
  5. import java.util.List;  
  6. import java.util.UUID;  
  7.   
  8. import javax.servlet.http.HttpServletRequest;  
  9.   
  10. import org.springframework.stereotype.Controller;  
  11. import org.springframework.web.bind.annotation.RequestMapping;  
  12. import org.springframework.web.bind.annotation.RequestMethod;  
  13. import org.springframework.web.bind.annotation.RequestParam;  
  14. import org.springframework.web.multipart.MultipartFile;  
  15.   
  16. import com.ztz.springmvc.model.Users;  
  17.   
  18. @Controller  
  19. @RequestMapping("/file")  
  20. public class FileUploadController {  
  21.       
  22.     @RequestMapping(value="/upload",method=RequestMethod.POST)  
  23.     private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile[] file,  
  24.             HttpServletRequest request)throws Exception{  
  25.         //基本表单  
  26.         System.out.println(users.toString());  
  27.           
  28.         //获得物理路径webapp所在路径  
  29.         String pathRoot = request.getSession().getServletContext().getRealPath("");  
  30.         String path="";  
  31.         List<String> listImagePath=new ArrayList<String>();  
  32.         for (MultipartFile mf : file) {  
  33.             if(!mf.isEmpty()){  
  34.                 //生成uuid作为文件名称  
  35.                 String uuid = UUID.randomUUID().toString().replaceAll("-","");  
  36.                 //获得文件类型（可以判断如果不是图片，禁止上传）  
  37.                 String contentType=mf.getContentType();  
  38.                 //获得文件后缀名称  
  39.                 String imageName=contentType.substring(contentType.indexOf("/")+1);  
  40.                 path="/static/images/"+uuid+"."+imageName;  
  41.                 mf.transferTo(new File(pathRoot+path));  
  42.                 listImagePath.add(path);  
  43.             }  
  44.         }  
  45.         System.out.println(path);  
  46.         request.setAttribute("imagesPathList", listImagePath);  
  47.         return "success";  
  48.     }  
  49.     //因为我的JSP在WEB-INF目录下面，浏览器无法直接访问  
  50.     @RequestMapping(value="/forward")  
  51.     private String forward(){  
  52.         return "index";  
  53.     }  
  54. }  


技术分享

技术分享

 

以上是关于springmvc上传图片并显示图片--支持多图片上传的主要内容，如果未能解决你的问题，请参考以下文章

ssm框架实现图片上传显示并保存地址到数据库

springMVC实现 MultipartFile 多文件上传,StandardMultipartHttpServletRequest上传文件,在请求中上传文件,比如上传图片

我爱Java系列---SpringMVC传统方式的文件上传和前端获取数据库图片在页面显示

Spring Boot 实现多图片上传并回显，涨姿势了～

SSM框架之文件上传

Vue+ElementUI实现图片上传