how2j.cn

相关下载
文件名 文件大小
springmvc.rar 11m
使用站长秘制下载工具
步骤 1 : 先运行,看到效果,再学习   
步骤 2 : 模仿和排错   
步骤 3 : 效果   
步骤 4 : 配置web.xml允许访问*.jpg   
步骤 5 : 配置springmvc-servlet.xml   
步骤 6 : upload.jsp 上传页面   
步骤 7 : 准备UploadedImageFile   
步骤 8 : UploadController 上传控制器   
步骤 9 : showUploadedFile.jsp 显示图片的页面   
步骤 10 : 测试   
步骤 11 : 练习   

步骤 1 :

先运行,看到效果,再学习

老规矩,先下载右上角的可运行项目,配置运行起来,确认可用之后,再学习做了哪些步骤以达到这样的效果。
步骤 2 :

模仿和排错

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

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

效果

访问地址:

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

这个通过springmvc上传图片,并显示的效果
效果
步骤 4 :

配置web.xml允许访问*.jpg

在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>
步骤 5 :

配置springmvc-servlet.xml

新增加一段配置

<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>
<?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>
步骤 6 :

upload.jsp 上传页面

上传页面,需要注意的是form 的两个属性必须提供
method="post" 和 enctype="multipart/form-data" 缺一不可
上传组件 增加一个属性 accept="image/*" 表示只能选择图片进行上传
留意 <input type="file" name="image" 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>
<%@ 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>
步骤 7 :

准备UploadedImageFile

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

这里的字段 image必须和上传页面upload.jsp中的image
<input type="file" name="image" accept="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; } }
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;
	}

}
步骤 8 :

UploadController 上传控制器

新建类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; @Controller public 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; } }
步骤 9 :

showUploadedFile.jsp 显示图片的页面

在WEB-INF/page 下新建文件showUploadedFile 显示上传的图片
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <img src="image/${imageName}"/>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>

<img src="image/${imageName}"/>
步骤 10 :

测试

访问页面

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

选择jpg文件进行上传
测试
步骤 11 :

练习

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
修改配置,以支持动态图片gif


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-10-09 上传的图片是保存在服务器上的吗,是没有保存在数据库里的吧。
杀手哥
战长,你上传的图片是保存在服务器上的吧,是没有保存在数据库里的吧。




1 个答案

maven 答案时间:2018-10-12
应该是保存在服务器的一个文件夹中的,数据库只需要保存文件名就可以




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-10-06 不懂
求知
24行: newFile.getParentFile().mkdirs(); 这句的作用是什么?




1 个答案

maven 答案时间:2018-10-12
创建文件夹




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-09-22 upload.jsp上传页面的图片资源是哪里获得的呢?
2018-09-05 MultipartFile 注入
2018-09-04 请问这段代码的作用是什么。前面不是已经给文件命名好了吗?
2018-08-31 右上角文件下载后直接运行,选择图片点击上传后404
2018-08-30 upload.jsp的放置问题
2018-08-18 gif图片上传问题
2018-08-14 上传之后跳转页面报错!!!!!!
2018-07-30 示例图片
2018-06-07 老师,请问下载文件怎么做呢?
2018-05-30 请问所有的静态资源访问都需要配置一遍吗?
2018-05-22 出现NoSuchMethodError: javax.servlet.http.HttpServletRequest.getServletContext()
2018-05-18 为什么<url-pattern>/</url-pattern>会拦截静态资源,而不拦截.jsp呢
2018-05-17 为什么'/'不能访问静态资源呢?不是很明白
2018-05-14 HttpServletRequest和HttpSession在上传图片的区别?
2018-05-09 站长,答案在哪里?
2018-05-04 我想问下多文件上传怎么做?能用这个吗?整不懂了
2018-04-26 我这也报这个错误,然后检查了springmvc-servlet.xml,没有拼写错误。
2018-03-16 The method getServletContext() is undefined for the type HttpServletRequest !!
2018-03-09 什么情况下新建JSP在webcontent,什么情况下新建JSP在web_INF里边呢?
2018-03-08 上传图片 提交时出错。提示HTTP Status 500 - Servlet.init() for servlet springmvc threw exception
2018-03-03 我用IDEA上传图片路径的问题
2018-02-25 说不能显示图片的兄弟们都看过来以下,说不定是这个原因导致
2018-02-06 HTTP Status 500
2018-01-17 不能直接访问upload页面
2017-12-26 站长大大,upload.jsp中提交的image是怎么到upload(HttpServletRequest request, UploadedImageFile file)方法中的file参数中的呢?
2017-11-08 您的代码出错了吗?
2017-10-27 不能显示图片
2017-10-24 关于jsp的摆放问题
2017-10-19 下载了代码运行不了 404
2017-09-30 上传的这个图片可以的,让人充满想象,谢谢你精心的总结,本人受益匪浅。
2017-09-25 找了半天也找不到图片上传到哪里
2017-09-25 我百度了一下说用getRealPath(“/”)不好,要用getResource()比较好
2017-09-15 直接用你的代码跑,上传图片后在原来的img目录下没有新上传的图片啊
2017-09-15 直接用你的代码跑,上传图片后在原来的img目录下没有新上传的图片啊
2017-09-11 上传之后的图片文件名为什么会变
2017-09-06 站长大大,框架这块的确遇到了好多问题,图片上传我按照您的方法不知道为什么没法显示
2017-07-31 步骤7和步骤8的问题
2017-07-01 个人的一些修改的疑问
2017-06-29 请问各位有没有碰到 file.getImage().transferTo(newFile); 提示空指针异常的情况,怎么解决?
2017-06-27 跳转问题
2017-05-27 能解释一下这两句代码么
2017-05-27 上传*jsp是在默认的servlet里边拦截的吧,为什么要在springmvc-servlet配置上传功能呢,为什么不再default-servlet里设置上传功能呢
2017-05-20 图片是上传到本地还是服务器
2017-05-07 图片存储在哪里?
2016-10-19 不改代码,也可以上传查看gif图片
2016-10-19 有些代码不正确




提问之前请登陆
关于 JAVA 框架-Spring MVC-上传文件 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图