SpringMVC+ajax文件上传实例教程
原文地址：https://blog.csdn.net/weixin_41092717/article/details/81080152
文件上传
文件上传是项目开发中最常见的功能。为了能上传文件，必须将表单的method设置为POST，并将enctype设置为multipart/form-data。只有在这样的情况下，浏览器才会把用户选择的文件以二进制数据发送给服务器。
一旦设置了enctype为multipart/form-data，浏览器即会采用二进制流的方式来处理表单数据，而对于文件上传的处理则涉及在服务器端解析原始的HTTP响应。在2003年，Apache Software Foundation发布了开源的Commons FileUpload组件，其很快成为Servlet/JSP程序员上传文件的最佳选择。
Servlet3.0规范已经提供方法来处理文件上传，但这种上传需要在Servlet中完成。而SpringMVC则提供了更简单的封装。
SpringMVC为文件上传提供了直接的支持，这种支持是用即插即用的MultipartResolver实现的。SpringMVC使用Apache Commons FileUpload技术实现了一个MultipartResolver实现类：CommonsMultipartResolver。因此，SpringMVC的文件上传还需要依赖Apache Commons FileUpload的组件。
这个实例教程是我在其他项目中取的lib包，是用idea开发的一个demo。采用Tomcat7作为web服务器大家跟随我的步骤做一般不会有问题。
第一步创建springmvc项目点击file—>new—> project勾选如下图所示的选项后续next；中途会有项目的名字这里自己随意我取得名字叫mvc；创建项目的过程中会自动倒部分SpringMVC的jar包依赖，后续还需要添加。
创建好的项目结构
2.lib需要的包结构图因为是从其他项目中提取得jar包其中有几个是用不到的；如果闲麻烦可以到百度云下载
提醒：如果你直接从我的链接下载最好把你创建工程时自动下载的依赖jar包删除，然后直接导入
链接：https://pan.baidu.com/s/1Hdapx9J2K9_CPtIM15ImxA
提取密码：8tk3
下面我们在WebContent/WEB-INF下创建一个content文件夹，用于放文件的上传、下载等jsp文件，下面我们创建uploadForm.jsp文件，演示SpringMVC的文件上传：
<%--
Created by IntelliJ IDEA.
User: YYBJ
Date: //
Time: :
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html> <head>
<!-- jQuery -->
<script src="/assets/js/jquery.min.js"></script> <!-- 如果你不想从网上下载js再导入项目可以用百度在线网址js文件 注意：电脑要联网才行 -->
<!-- <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传</title> </head>
<body>
<h2>文件上传</h2>
<form id="tf" enctype="multipart/form-data" >
<table>
<tr>
<td>文件描述:</td>
<td><input type="text" name="description"></td>
</tr>
<tr>
<td>请选择文件:</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td><input type="button" value="上传" οnclick="test()"></td>
</tr>
</table>
</form> <script >
function test(){
alert("aaaaaaaaaaaa")
var form = new FormData(document.getElementById("tf"));
$.ajax({
url:"/controller/upload",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
if(data==""){
alert("上传成功")
}else {
alert("上传失败")
}
}
});
} </script>
</body> </html>
注意提醒：这里ajax结合formdata对象上传文件是比较方便的如果对formdata不了解可以自行查看关于formdata的资料提供一个链接参考
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
SpringMVC会将上传的文件绑定到MultipartFile对象中。MultipartFile提供了获取上传文件内容、文件名等方法。
通过transferTo()方法还可以将文件存储到硬件中，MultipartFile对象中的常用方法如下： byte[] getBytes()：获取文件数据
String getContentType[]：获取文件MIME类型，如image/jpeg等
InputStream getInputStream()：获取文件流
String getName()：获取表单中文件组件的名字
String getOriginalFilename()：获取上传文件的原名
Long getSize()：获取文件的字节大小，单位为byte
boolean isEmpty()：是否有上传文件
void transferTo(File dest)：将上传文件保存到一个目录文件中
SpringMVC上下文中默认没有装配MultipartResolver，因此默认情况下其不能处理文件上传工作。如果想使用spring的文件上传功能，
则需要在上下文中配置MultipartResolver。在dispatcher-servlet.xml进行配置文件如下：
<?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:p="http://www.springframework.org/schema/p"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
"> <!-- spring可以自动去扫描base-pack下面的包或者子包下面的java文件，
如果扫描到有Spring的相关注解的类，则把这些类注册为Spring的bean -->
<context:component-scan base-package="cn.edu.jseti"/> <!-- 视图解析器 -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- 前缀 -->
<property name="prefix">
<value>/WEB-INF/content/</value>
</property>
<!-- 后缀 -->
<property name="suffix">
<value>.jsp</value>
</property>
</bean> <bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 上传文件大小上限，单位为字节（10MB） -->
<property name="maxUploadSize">
<value></value>
</property>
<!-- 请求的编码格式，必须和jSP的pageEncoding属性一致，以便正确读取表单的内容，默认为ISO-- -->
<property name="defaultEncoding">
<value>UTF-</value>
</property>
</bean> </beans>
在applicationContext.xml文件中同样添加包扫描
<?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.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
">
<!-- spring可以自动去扫描base-pack下面的包或者子包下面的java文件，
如果扫描到有Spring的相关注解的类，则把这些类注册为Spring的bean -->
<context:component-scan base-package="cn.edu.jseti"/>
在web.xml文件中添加必要的过滤器和servlet配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<display-name>MultipartFileTest</display-name>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>
<!-- 定义Spring MVC的前端控制器 -->
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/dispatcher-servlet.xml</param-value>
</init-param>
<load-on-startup></load-on-startup>
</servlet> <!-- 让Spring MVC的前端控制器拦截所有请求 -->
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>*.json</url-pattern>
</servlet-mapping>
<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-</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
在最外层的index.jsp文件中添加一行跳转请求。正常情况下我们的jsp页面都放在web-INF下。一般是不能直接跳转访问的所以我们采用调用接口在接口中请求跳转。这里会请求到controller目录下的intoload方法这时候注解的方式就起作用了。
<%--
Created by IntelliJ IDEA.
User: YYBJ
Date: //
Time: :
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:forward page="/controller/intoload"/>
负责上传文件的表单和一般表单有一些区别，负责上传文件的表单的编码类型必须是“multipart/form-data”。
我们再src下创建一个包“cn.edu.jseti.controller”，然后创建一个FileUploadController类，用于实现文件的上传和下载功能。以下是所有的controller代码。注意：这里会用到注解的开发所以需要配置.xml文件在后续步骤
package cn.edu.jseti.controller; import cn.edu.jseti.domain.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.apache.commons.io.FileUtils;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.ui.Model;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView; import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File; /**
* Created by YYBJ on 2018/7/16.
* ZCL
*/
@Controller
@RequestMapping("/controller")
public class FileUploadController {
//这个方法是进行页面跳转的 jsp页面在WEB-INF下不能直接访问
@RequestMapping(value = "/intoload")
public ModelAndView intoload(HttpServletRequest request, HttpServletResponse response)throws Exception{
System.out.println("");
ModelAndView mv = new ModelAndView();
mv.setViewName("/uploadForm");
return mv;
}
//上传文件会自动绑定到MultipartFile中
@RequestMapping("/upload")
@ResponseBody
public String upload(HttpServletRequest request,
@RequestParam("description") String description,
@RequestParam("file") MultipartFile file) throws Exception {
System.out.println(description);
//如果文件不为空，写入上传路径
if(!file.isEmpty()) {
//上传文件路径
String path = request.getServletContext().getRealPath("/images/"); System.out.println(path);
//上传文件名
String filename = file.getOriginalFilename();
File filepath = new File(path,filename);
//判断路径是否存在，如果不存在就创建一个
if (!filepath.getParentFile().exists()) {
filepath.getParentFile().mkdirs();
}
//将上传文件保存到一个目标文件当中
file.transferTo(new File(path + File.separator + filename));
//输出文件上传最终的路径 测试查看
System.out.println(path + File.separator + filename);
return "";
} else {
return "";
} } }
最终启动项目测试控制台Tomcat基本没有报错，这时开始测试，启动项目自动跳转到文件上传页面。如果跳转出错看自己的tomc配置路径是否有问题。
最终测试完成 从控制台查看输出的路径找到图片是否存在到此文件上传完成。有问题可以留言
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_41092717/article/details/81080152
SpringMVC+ajax文件上传实例教程的更多相关文章
- springmvc+ajax文件上传
环境:JDK6以上,这里我是用JDK8,mysql57,maven项目 框架环境:spring+springmvc+mybaits或spring+springmvc+mybatis plus 前端代码 ...
- springMVC+ajax 文件上传 带进度条
前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
- SpringMVC实现ajax文件上传
SpringMVC实现文件上传,直接上代码: 后台代码: 01 @RequestMapping(value = "/uploadApk") 02 @ResponseBody 03 ...
- ExtJS：文件上传实例
ExtJS:文件上传实例 var ext_dateFormat = 'Y-m-d H:i:s'; var dateFormat = 'yyyy-MM-dd HH:mm:ss'; var date = ...
- 使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
- jquery.form.js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传
jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...
- springmvc图片文件上传接口
springmvc图片文件上传 用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...
- AJAX文件上传实践与分析，带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- SpringMVC学习--文件上传
简介 文件上传是web开发中常见的需求之一,springMVC将文件上传进行了集成,可以方便快捷的进行开发. springmvc中对多部件类型解析 在 页面form中提交enctype="m ...
随机推荐
- Groovy元编程简明教程
同函数式编程类似,元编程,看上去像一门独派武学. 在 <Ruby元编程>一书中,定义:元编程是运行时操作语言构件的编程能力.其中,语言构件指模块.类.方法.变量等.常用的主要是动态创建和访 ...
- pycharm问题解析（connecting to console）
1. 场景描述 以前一直用的anaconda3,临时下载了demo用的python2,就下载anaconda2安装了下,测试过后,发现pycharm中以前的项目跑不起来了,一直报:connecting ...
- 如何使用re模块进行测试用例的参数化
import re import os from scripts.handle_mysql import HandleMysql from scripts.handle_config import H ...
- Selenium+java - 通过Robot对象上传文件
思路: 1.将文件路径复制到剪切板 2.用robot对象模拟键盘操作即可 复制文件代码: public void setClipboardData(String data) { StringSelec ...
- Netty—TCP的粘包和拆包问题
一.前言 虽然TCP协议是可靠性传输协议,但是对于TCP长连接而言,对于消息发送仍然可能会发生粘贴的情形.主要是因为TCP是一种二进制流的传输协议,它会根据TCP缓冲对包进行划分.有可能将一个大数据包 ...
- java高并发系列 - 第13天:JUC中的Condition对象
本文目标: synchronized中实现线程等待和唤醒 Condition简介及常用方法介绍及相关示例 使用Condition实现生产者消费者 使用Condition实现同步阻塞队列 Object对 ...
- TreeMap源码分析，看了都说好
概述 TreeMap也是Map接口的实现类,它最大的特点是迭代有序,默认是按照key值升序迭代(当然也可以设置成降序).在前面的文章中讲过LinkedHashMap也是迭代有序的,不过是按插入顺序或访 ...
- boolean matches(String regex)正则表达式判断当前字符串是否满足格式要求
package seday02;/*** boolean matches(String regex) * 使用给定正则表达式判断当前字符串是否满足格式要求,满足 则返回true. * 注意:此方法是做 ...
- Java 静态工厂模式的使用
多相关文章请参考:http://www.enjoytoday.cn/categorys/java 静态工厂模式给人的第一印象就是:static+abstract.这两个词汇已经说明了一切,一个是周期长 ...
- python3+Scrapy爬虫使用pipeline数据保存到文本和数据库，数据少或者数据重复问题
爬取的数据结果是没有错的,但是在保存数据的时候出错了,出现重复数据或者数据少问题.那为什么会造成这种结果呢? 其原因是由于Spider的速率比较快,而scapy操作数据库操作比较慢,导致pipelin ...