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 ...
随机推荐
- 【shell脚本】一键部署LNMP===deploy.sh
一键部署mysql,php,nginx,通过源码安装部署 #!/bin/bash # 一键部署 LNMP(源码安装版本) menu() { clear echo " ############ ...
- H3C DRNI学习
DRNI:Distributed Resilient Network Interconnect,分布式弹性网络互连.DR:分布式聚合接口IPP:内部控制链路端口IPL:内部控制链路DRCP报文:分布式 ...
- php laravel请求处理管道（装饰者模式）
laravel的中间件使用了装饰者模式.比如,验证维护模式,cookie加密,开启会话等等.这些处理有些在响应前,有些在响应之后,使用装饰者模式动态减少或增加功能,使得框架可扩展性大大增强. 接下来简 ...
- Linq分页排序通用方法
1.通用方法 2.调用 -----------------------------1.------------------------------------------- public class ...
- gcc原子操作测试
#include <stdio.h> #include <pthread.h> #include <stdlib.h> ; void *test_func(void ...
- WPF 使用SetParent嵌套窗口
有点类似与Winform的MDI窗口. 使用函数为SetParent和MoveWindow(经常配合). [DllImport("user32.dll", SetLastError ...
- abp实战-ContosoUniversity Abp版-1运行项目
1. 去abp官网下载模板工程,当前最新版本是abp5.0,基于.net core 3.0 https://aspnetboilerplate.com/ 项目名称为ContosoAbp 这里使用的是n ...
- 装上这 10 个插件，你就是这条 Gai 最靓的仔！
直奔主题,给大家推荐 10 个好用的插件. 1.「Adblock Plus」 世界排名第一的免费广告拦截程序 相信大家都有这样的体验,进某个论坛.新闻或者购物网站,广告满天飞,关掉之后还时不时弹出 ...
- Linux下设置root密码
如下面的代码所示: sudo passwd [sudo] geeksong 的密码: 输入新的 UNIX 密码: 重新输入新的 UNIX 密码: passwd:已成功更新密码 更性的unix密码就是r ...
- MySQL 同一Windows系统上安装多个数据库
Step 1:拷贝一份MySQL整个安装文件,并拷贝一份 my.ini 文件放置安装目录下,然后修改以下内容.注意 port 不能设置为默认的3306,这里我们设置为3307端口. basedir=C ...