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

    xiaoxiao2021-03-25  57

    实现上传图片功能在Springmvc中很好实现。现在我将会展现完整例子。开始需要在pom.xml加入几个jar,分别是:

    [java]  view plain  copy <dependency>       <groupId>commons-fileupload</groupId>       <artifactId>commons-fileupload</artifactId>       <version>1.3.1</version>   </dependency>   <dependency>       <groupId>commons-io</groupId>       <artifactId>commons-io</artifactId>       <version>2.4</version>   </dependency>   接下来,在Springmvc的配置加入上传文件的配置(PS:我把springmvc的完整配置都展现出来):

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

    一、 单文件上传

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

    [java]  view plain  copy package com.ztz.springmvc.model;      public class Users {       private String name;       private String password;       //省略get set方法              //重写toString()方便测试       @Override       public String toString() {           return "Users [name=" + name + ", password=" + password +  "]";       }   }   这个是表单的JSP页面:

    [java]  view plain  copy <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>   <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>   <%   String path = request.getContextPath();   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   request.setAttribute("basePath", basePath);   %>   <!DOCTYPE html>   <html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>FileUpload</title>   </head>   <body>   <form action="${basePath}file/upload" method="post" enctype="multipart/form-data">       <label>用户名:</label><input type="text" name="name"/><br/>       <label>密 码:</label><input type="password" name="password"/><br/>       <label>头 像</label><input type="file" name="file"/><br/>       <input type="submit" value="提  交"/>   </form>   </body>   </html>   上传成功跳转的JSP页面,并且显示出上传图片:

    [java]  view plain  copy <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>   <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>   <%   String path = request.getContextPath();   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   request.setAttribute("basePath", basePath);   %>   <!DOCTYPE html>   <html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>头像</title>   </head>   <body>   <img src="${basePath}${imagesPath}">   </body>   </html>   最后是Controller:

    [java]  view plain  copy package com.ztz.springmvc.controller;      import java.io.File;   import java.util.UUID;      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.multipart.MultipartFile;      import com.ztz.springmvc.model.Users;      @Controller   @RequestMapping("/file")   public class FileUploadController {              @RequestMapping(value="/upload",method=RequestMethod.POST)       private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile file,               HttpServletRequest request)throws Exception{           //基本表单           System.out.println(users.toString());                      //获得物理路径webapp所在路径           String pathRoot = request.getSession().getServletContext().getRealPath("");           String path="";           if(!file.isEmpty()){               //生成uuid作为文件名称               String uuid = UUID.randomUUID().toString().replaceAll("-","");               //获得文件类型(可以判断如果不是图片,禁止上传)               String contentType=file.getContentType();               //获得文件后缀名称               String imageName=contentType.substring(contentType.indexOf("/")+1);               path="/static/images/"+uuid+"."+imageName;               file.transferTo(new File(pathRoot+path));           }           System.out.println(path);           request.setAttribute("imagesPath", path);           return "success";       }       //因为我的JSP在WEB-INF目录下面,浏览器无法直接访问       @RequestMapping(value="/forward")       private String forward(){           return "index";       }   }  

    点击提交控制台输出:

    Users [name=fileupload, password=test]

    浏览器显示结果:

    二、 多图片上传

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

    [java]  view plain  copy <body>   <form action="${basePath}file/upload" method="post" enctype="multipart/form-data">       <label>用户名:</label><input type="text" name="name"/><br/>       <label>密 码:</label><input type="password" name="password"/><br/>       <label>头 像1</label><input type="file" name="file"/><br/>       <label>头 像2</label><input type="file" name="file"/><br/>       <input type="submit" value="提  交"/>   </form>   </body>   展示图片来个循环,以便显示多张图片

    [java]  view plain  copy <body>   <c:forEach items="${imagesPathList}" var="image">       <img src="${basePath}${image}"><br/>   </c:forEach>   </body>   控制层代码如下:

    [java]  view plain  copy package com.ztz.springmvc.controller;      import java.io.File;   import java.util.ArrayList;   import java.util.List;   import java.util.UUID;      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.multipart.MultipartFile;      import com.ztz.springmvc.model.Users;      @Controller   @RequestMapping("/file")   public class FileUploadController {              @RequestMapping(value="/upload",method=RequestMethod.POST)       private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile[] file,               HttpServletRequest request)throws Exception{           //基本表单           System.out.println(users.toString());                      //获得物理路径webapp所在路径           String pathRoot = request.getSession().getServletContext().getRealPath("");           String path="";           List<String> listImagePath=new ArrayList<String>();           for (MultipartFile mf : file) {               if(!mf.isEmpty()){                   //生成uuid作为文件名称                   String uuid = UUID.randomUUID().toString().replaceAll("-","");                   //获得文件类型(可以判断如果不是图片,禁止上传)                   String contentType=mf.getContentType();                   //获得文件后缀名称                   String imageName=contentType.substring(contentType.indexOf("/")+1);                   path="/static/images/"+uuid+"."+imageName;                   mf.transferTo(new File(pathRoot+path));                   listImagePath.add(path);               }           }           System.out.println(path);           request.setAttribute("imagesPathList", listImagePath);           return "success";       }       //因为我的JSP在WEB-INF目录下面,浏览器无法直接访问       @RequestMapping(value="/forward")       private String forward(){           return "index";       }   }  

    PS:本demo地址:http://download.csdn.net/detail/zwz568017880/9043089

    转载请注明原文地址: https://ju.6miu.com/read-39606.html

    最新回复(0)