Spring MVC系列教材 （八）- SPRING MVC 上传文件

更多内容，点击了解： https://how2j.cn/k/springmvc/springmvc-upload/621.html步骤1:先运行，看到效果，再学习
步骤2:模仿和排错
步骤3:效果
步骤4:配置web.xml允许访问.jpg
步骤5:配置springmvc-servlet.xml
步骤6:upload.jsp 上传页面
步骤7:准备UploadedImageFile
步骤8:UploadController 上传控制器
步骤9:showUploadedFile.jsp 显示图片的页面
步骤10:测试
步骤11:练习*

老规矩，先下载下载区(点击进入)的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。

在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码，来定位问题所在。
采用这种方式，学习有效果，排错有效率，可以较为明显地提升学习速度，跨过学习路上的各个槛。

推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。
这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来
这里提供了绿色安装和使用教程：diffmerge 下载和使用教程

访问地址：

http://127.0.0.1:8080/springmvc/upload.jsp

这个通过springmvc上传图片，并显示的效果

在web.xml中新增加一段

<servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.jpg</url-pattern></servlet-mapping>

表示允许访问*.jpg。

为什么要加这一段呢？ 因为配置springmvc的servlet的时候，使用的路径是"/"，导致静态资源在默认情况下不能访问，所以要加上这一段，允许访问jpg。 并且必须加在springmvc的servlet之前

如果你配置spring-mvc使用的路径是/*.do，就不会有这个问题了。

注： 这里仅仅是允许访问jpg,如果你要显示png,gif那么需要额外进行配置

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 <servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.jpg</url-pattern></servlet-mapping> <servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>/</url-pattern></servlet-mapping><filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> 
    </filter-mapping>    
</web-app>

新增加一段配置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

开放对上传功能的支持

<?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:context="http://www.springframework.org/schema/context"xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    http://www.springframework.org/schema/context        
    http://www.springframework.org/schema/context/spring-context-3.0.xsd"> <context:component-scan base-package="controller" /><bean id="irViewResolver"class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/page/" /><property name="suffix" value=".jsp" /></bean><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/></beans>

上传页面，需要注意的是form 的两个属性必须提供
method=“post” 和 enctype=“multipart/form-data” 缺一不可
上传组件 增加一个属性 accept=“image/*” 表示只能选择图片进行上传
留意 这个image，后面会用到这个image

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"%>
  <form action="uploadImage" method="post" enctype="multipart/form-data">
  选择图片:<input type="file" name="image" accept="image/*" /> <br>
  <input type="submit" value="上传"></form>

在UploadedImageFile中封装MultipartFile类型的字段 image ，用于接受页面的注入

这里的字段 image必须和上传页面upload.jsp中的image
保持一致

package pojo;
 import org.springframework.web.multipart.MultipartFile;
 public class UploadedImageFile {MultipartFile image;
 public MultipartFile getImage() {return image;}
 public void setImage(MultipartFile image) {this.image = image;}
 }

新建类UploadController 作为上传控制器
准备方法upload 映射上传路径/uploadImage

1. 方法的第二个参数UploadedImageFile 中已经注入好了 image
2. 通过 RandomStringUtils.randomAlphanumeric(10);获取一个随机文件名。 因为用户可能上传相同文件名的文件，为了不覆盖原来的文件，通过随机文件名的办法来规避
3. 根据request.getServletContext().getRealPath 获取到web目录下的image目录，用于存放上传后的文件。
4. 调用file.getImage().transferTo(newFile); 复制文件
5. 把生成的随机文件名提交给视图，用于后续的显示

package controller;
 import java.io.File;import java.io.IOException;
 import javax.servlet.http.HttpServletRequest;
 import org.apache.commons.lang.xwork.RandomStringUtils;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.servlet.ModelAndView;
 import pojo.UploadedImageFile;
 @Controllerpublic class UploadController {
 @RequestMapping("/uploadImage")public ModelAndView upload(HttpServletRequest request, UploadedImageFile file)throws IllegalStateException, IOException {String name = RandomStringUtils.randomAlphanumeric(10);String newFileName = name + ".jpg";File newFile = new File(request.getServletContext().getRealPath("/image"), newFileName);newFile.getParentFile().mkdirs();file.getImage().transferTo(newFile);
 
        ModelAndView mav = new ModelAndView("showUploadedFile");mav.addObject("imageName", newFileName);return mav;}}

在WEB-INF/page 下新建文件showUploadedFile 显示上传的图片

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" isELIgnored="false"%>
 <img src="image/${imageName}"/>

访问页面

http://127.0.0.1:8080/springmvc/upload.jsp

选择jpg文件进行上传

步骤 11 : 练习
修改配置，以支持动态图片gif

更多内容，点击了解： https://how2j.cn/k/springmvc/springmvc-upload/621.html