[TOC]
# 上传文件
## 步骤 1 : 先运行，看到效果，再学习
先将完整的项目（向老师要相关资料），配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。
## 步骤 2 : 模仿和排错
在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较**正确答案** ( 可运行项目 ) 和自己的代码，来定位问题所在。
采用这种方式，**学习有效果，排错有效率**，可以较为明显地提升学习速度，跨过学习路上的各个槛。
## 步骤 3 : 效果
访问地址：
`http://127.0.0.1:8080/springmvc/upload.jsp`
这个通过springmvc上传图片，选择jpg文件进行上传，并显示的效果
## 步骤 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 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>springmvc</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<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="com.dodoke.controller"></context:component-scan>
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/page/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
<!-- id必须是multipartResolver，内部绑定好，不能改动 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
</beans>
~~~
## 步骤 6 : upload.jsp 上传页面
在WebContent中，创建upload.jsp，注意不是WEB-INF文件夹。
上传页面，需要注意的是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"%>
<!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">
<title>Insert title here</title>
</head>
<body>
<form action="uploadImage" method="post" enctype="multipart/form-data">
选择图片：<input type="file" name="image" accept="image/*" /><br>
<input type="submit" value="上传">
</form>
</body>
</html>
~~~
## 步骤 7 : 准备UploadedImageFile
在UploadedImageFile中封装MultipartFile类型的字段 image ，用于接受页面的注入。
这里的字段 image必须和上传页面upload.jsp中的image
<input type="file" name="image" accept="image/*" />
保持一致
~~~
package com.dodoke.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 com.dodoke.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 com.dodoke.pojo.UploadedImageFile;
@Controller
public class UploadController {
@RequestMapping("/uploadImage")
public ModelAndView upload(HttpServletRequest request, UploadedImageFile file)
throws IllegalStateException, IOException {
// 获取随机文件名
String name = RandomStringUtils.randomAlphanumeric(10);
// 获取原有文件名称（包括文件类型）
String fileName = file.getImage().getOriginalFilename();
// 截取文件类型
int indexdot = fileName.indexOf(".");
String suffix = fileName.substring(indexdot);
// 创建文件，给文件起名字
String newFileName = name + suffix;
// 创建 File对象，并设定存放位置和存放文件的文件名
File newFile = new File(request.getServletContext().getRealPath("/image"), newFileName);
// 调用newFile这个实例的getParentFile方法， 返回它的父目录对象的实例，得到父目录实例后，接着调用.mkdirs()(是父目录这个实例调用的)，创建文件夹。
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"%>
<!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">
<title>Insert title here</title>
</head>
<body>
<img alt="" src="image/${imageName }">
</body>
</html>
~~~
## 步骤 10 : 测试
访问页面
`http://127.0.0.1:8080/springmvc/upload.jsp`
选择jpg文件进行上传
## 常见问题
1. 上传之后跳转页面报错
> 检查下你的UploadController， 是否加上了@Controller注解，或者检查下展示图片的jsp的路径名（showUploadedFile）是否和UploadController中返回的一致。
2. 图片上传到哪里
> 因为是在Eclpise中启动的内置Tomcat，而内置Tomcat部署web应用，就是会上传到服务器上，如果是默认tomcat配置，我的是在下列文件中D:\project\spring\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\springmvc\image，其实图片是在你配置Tomcat那个server.xml配置的路径的项目下的image文件夹中。
> **注意不是上传到项目中**
- 数据库
- 数据库介绍
- MySQL的安装
- SQL
- 表基本操作
- 修改数据语句
- 数据检索操作
- 多表数据操作
- 练习题
- JAVA
- JAVA 介绍
- JAVA 运行原理
- JDK 配置
- 类和对象
- 数据类型
- 变量
- 直接量
- 运算符
- 流程控制
- 数组结构
- 面向对象
- 隐藏和封装
- 深入构造器
- 类的继承
- 多态
- 包装类
- final 修饰符
- 抽象类
- 接口
- 集合框架
- 常用类学习
- 设计模式-单例模式
- 异常处理
- JDBC
- JSP&Servlet
- Web应用
- Tomcat
- JSP
- Scriptlet
- Page 指令
- 包含指令
- 跳转指令
- 用户注册实例
- JSP练习
- 内置对象
- Servlet
- 过滤器
- Web分层思想
- EL表达式
- JSTL
- 分页实现
- AJAX&JSON
- 开发步骤
- 路径问题
- Log4j
- Mybatis框架
- 框架介绍
- Mybatis简单实现
- 表基本操作
- 优化配置文件
- 表字段名与实体类属性名不同的解决方案
- 一对一关联
- 一对多关联
- Spring框架
- IOC/DI
- 注入对象
- 注解方式 IOC/DI
- AOP
- 注解方式AOP
- 注解方式测试
- Spring MVC框架
- Hello SpringMVC
- 视图定位
- 注解方式
- 接受表单数据
- 客户端跳转
- Session
- 中文问题
- 上传文件
- SSM整合
- 整合步骤
- 分页
- PageHelper
- 连接池
- CRUD
- 事务管理
- JSON
- Maven
- 介绍
- 下载与配置MAVEN
- MAVEN仓库
- ECLIPSE中的MAVEN设置
- ECLIPSE下创建MAVEN风格的JAVA项目
- 添加JAR包
- 创建MAVEN风格的JAVA WEB项目
- 创建SSM项目
- 使用ECLIPSE导入一个MAVEN风格的SSM项目
- 教学管理
- 学员名录
- 周测统计
- 20180608
- 20180706
- 20180721
- 课堂作业
- 练习