Spring MVC 文件上传简单示例(form、ajax方式 )
1、Form Upload
SpringMVC 中,文件的上传是通过 MultipartResolver 实现的,所以要实现上传,只要注册相应的 MultipartResolver 即可。
MultipartResolver 的实现类有两个:
CommonsMultipartResolver(需要 Apache 的 commons-fileupload 支持,它能在比较旧的 servlet 版本中使用,兼容性好)StandardServletMultipartResolver(不需要第三方 jar 包支持,它使用 servlet 内置的上传功能,但是只能在 Servlet 3 以上的版本使用
以 StandardServletMultipartResolver 为例,使用步骤如下。
首先,在 web.xml 中为 DispatcherServlet 配置 Multipart:
<servlet>
<servlet-name>mvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<multipart-config>
<max-file-size>5242880</max-file-size> <!-- 上传文件的大小限制,比如下面表示 5 M -->
<max-request-size>10485760</max-request-size> <!-- 一次表单提交中文件的大小限制,必须下面代表 10 M -->
<file-size-threshold>0</file-size-threshold> <!-- 多大的文件会被自动保存到硬盘上。0 代表所有 -->
</multipart-config>
</servlet>
其次,在spring中注册MultipartResolver:
<bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver"></bean>
然后就可以使用了。
前端代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>文件上传</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="filename">
<input type="submit" value="提交">
</form>
</body>
</html>
后端代码:
package com.oukele.web; import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.regex.Pattern; @Controller
@RequestMapping(path = "/upload")
public class FileUploadController { @RequestMapping(path = "",method = RequestMethod.GET)
public String getPage(){
return "fileupload";
} @PostMapping
public String fileUpload(@RequestPart("filename")MultipartFile multipartFile, HttpServletRequest request) {
if( !multipartFile.isEmpty() ){
//验证文件是否为图片格式 && 文件大小不能超过 5M 1KB = 1024B
if( multipartFile.getContentType().contains("image/") && multipartFile.getSize() < 1024 * 1024 * 1024 * 5 ){
//图片的存储文件夹
String save = request.getServletContext().getRealPath("/images");
File file = new File(save);
if( !file.exists() ){
file.mkdirs();
}
//文件名
String fileName =multipartFile.getOriginalFilename().substring(0,multipartFile.getOriginalFilename().indexOf("."));
//上传文件的后缀
String zhui = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().indexOf("."),multipartFile.getOriginalFilename().length());
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
//生成新的文件名
String fileNewName ="upload_"+fileName+"_"+simpleDateFormat.format(new Date())+zhui;
try {
//将此图片存储到images文件夹中
multipartFile.transferTo(new File(save+"\\"+fileNewName));
} catch (IOException e) {
e.printStackTrace();
} }else{
return "";
} } return "redirect:/upload";
} }
运行:

结果:

以ajax的方式,进行文件上传
前端代码:
<form action="#" method="post" enctype="multipart/form-data">
宠物图片: <input type="file" name="filename" id="update_pet_img" style="width: 70px">
</form>
<img style="margin-top: 50px" class="update_img" src="" width="100px" height="100px" alt="未上传图片">
js脚本
<script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>
<script>
//修改区域-->,点击选择文件的时候实现自动上传图片。
$("#update_pet_img").change(function () {
var form = $(this).closest("form");
update_file_img(form);
});
//图片上传
function update_file_img(file) {
var formData = new FormData($(file)[0]);
//ajax请求
$.ajax({
type: "post",
url: "/imgUpload",
data: formData,
contentType: false,//告诉客户端不要设置Content-Type 请求头部
processData: false,//告诉客户端不处理过程数据
success: function (data) {//完成后的事件
$(".update_img").attr("src", data.img_src);//data.img_src得到图片的地址
},
error: function (error) {//出现错误时的事件
alert("出错啦。");
}
});
}
</script>
后端代码:(这里只是简单示例,练习可以适当减少)
package com.oukele.web; import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date; @Controller
@RequestMapping(path = "/imgUpload")
public class FileUpload { /*
* 宠物图片上传
* */
@PostMapping(produces = "application/json;charset=utf-8")
@ResponseBody
public String imgUpload(@RequestPart("filename") MultipartFile multipartFile, HttpServletRequest request, HttpServletResponse response){
if (multipartFile.isEmpty()) {
return "{\"error\":\"文件为空,错误格式\"}";
}
if (!multipartFile.getContentType().contains("image/")) {
return "{\"error\":\"只允许上传图片的文件\"}";
}
if (multipartFile.getSize() > 1024 * 1024 * 1024 * 5) {
return "{\"error\":\"图片大小不能超过5M\"}";
}
//图片的存储文件夹
String save = request.getServletContext().getRealPath("/images");
File file = new File(save);
if (!file.exists()) {
file.mkdirs();
}
String file1 = createFile(save, multipartFile); return file1;
}
//创建文件夹,格式为以日期文件名 比如 2018112 , 和 新的文件名,格式为 upload_文件名_日期.后缀名
public String createFile(String path, MultipartFile multipartFile) {
boolean flag = false;
String imgpath ="";
//创建文件夹
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd");
String dataFile = "/" + simpleDateFormat.format(new Date());
path += dataFile;
File file = new File(path);
if (!file.exists()) {
file.mkdirs();
}
//文件名
String fileName = multipartFile.getOriginalFilename().substring(0, multipartFile.getOriginalFilename().indexOf("."));
//上传文件的后缀
String zhui = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().indexOf("."), multipartFile.getOriginalFilename().length());
//生成新的文件名
String fileNewName = "upload_" + fileName + "_" + simpleDateFormat.format(new Date()) + zhui;
try {
//将此图片存储到对应的文件夹中
multipartFile.transferTo(new File(path + "/" + fileNewName));
imgpath ="/images"+dataFile+"/"+ fileNewName;
flag = true;
} catch (Exception e) {
flag = false;
e.printStackTrace();
}
if( flag ){
return "{\"img_src\":\""+imgpath+"\"}";
} return "{\"error\":\"出现异常\"}";
}
}
演示:

Spring MVC 文件上传简单示例(form、ajax方式 )的更多相关文章
- 【Java Web开发学习】Spring MVC文件上传
[Java Web开发学习]Spring MVC文件上传 转载:https://www.cnblogs.com/yangchongxing/p/9290489.html 文件上传有两种实现方式,都比较 ...
- Spring MVC 笔记 —— Spring MVC 文件上传
文件上传 配置MultipartResolver <bean id="multipartResolver" class="org.springframework.w ...
- Spring MVC文件上传教程 commons-io/commons-uploadfile
Spring MVC文件上传教程 commons-io/commons-uploadfile 用到的依赖jar包: commons-fileupload 1.3.1 commons-io 2.4 基于 ...
- Spring mvc文件上传实现
Spring mvc文件上传实现 jsp页面客户端表单编写 三个要素: 1.表单项type="file" 2.表单的提交方式:post 3.表单的enctype属性是多部分表单形式 ...
- Spring mvc 文件上传到文件夹(转载+心得)
spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...
- spring mvc 文件上传 ajax 异步上传
异常代码: 1.the request doesn't contain a multipart/form-data or multipart/mixed stream, content type he ...
- Strut2 和Spring MVC 文件上传对比
在Java领域中,有两个常用的文件上传项目:一个是Apache组织Jakarta的Common-FileUpload组件 (http://commons.apache.org/proper/commo ...
- 【Spring】Spring MVC文件上传--整合bootstrap-fileinput和jQuery-File-Upload
前言 这里分享两个使用Spring MVC进行文件上传的简单示例, 分别整合bootstrap-fileinput 和 Jquery File Upload , 代码十分简单, 都是入门的示例,因此这 ...
- Spring MVC文件上传处理
以下示例显示如何在使用Spring Web MVC框架的表单中上传文件和处理.首先使用Eclipse IDE来创建一个WEB工程,实现一个上传文件并保存的功能.并按照以下步骤使用Spring Web ...
随机推荐
- B/S结构-登录页面-测试用例设计
页面描述: 有一个登陆页面, 假如上面有2个textbox, 一个提交按钮 测试需求: 请针对这个页面设计30个以上的testcase 功能测试(Function test) 0. 什么都不输入,点击 ...
- login 模块,re 模块
标准三流 标准输入流:sys. stdin # input的底层 标准输出流:sys. stdout # print的底层 标准错误流:sys. stderr # 异常及loggin ...
- 【MapReduce】一、MapReduce简介与实例
(一)MapReduce介绍 1.MapReduce简介 MapReduce是Hadoop生态系统的一个重要组成部分,与分布式文件系统HDFS.分布式数据库HBase一起合称为传统Hadoop的三 ...
- Linux 操作命令简
一.Linux命令及获取帮助 1.Linux命令的格式1)了解Linux命令的语法格式:命令 [选项] [参数]2)掌握命令格式中命令.选项.参数的具体含义a)命令:告诉Linux(UNIX)操作系统 ...
- 看我如何通过邮箱获取IP定位-复现
环境准备:一台部署了phpstudy 的vps 脚本内容:get_ip.php 该脚本可以生成一个十分隐蔽的图片,并获取客户端的一些敏感信息. 代码内容如下: <?php //show_sour ...
- 1 基于梯度的攻击——FGSM
FGSM原论文地址:https://arxiv.org/abs/1412.6572 1.FGSM的原理 FGSM的全称是Fast Gradient Sign Method(快速梯度下降法),在白盒环境 ...
- BUUOJ reverse SimpleRev (爆破)
SimpleRev SimpleRev(flag需加上flag{}再提交) 注意:得到的 flag 请包上 flag{} 提交 拖到ida 找到关键函数: unsigned __int64 Decry ...
- C++四种类型转换总结
C风格的强制类型转换很简单,均用 Type b = (Type)a 形式转换.C++风格的类型转换提供了4种类型转换操作符来应对不同场合的应用,如下表: 转换类型操作符 作用 const_cast 去 ...
- mybatis批量更新update-设置多个字段值allowMultiQueries=true
mybatis由于简单易用性得到大家的认可和使用 但是在批量更新操作中,网上介绍的貌似不全,正好今天做个记录,大家一起进步 在实际项目开发过程中,常有这样的需求:根据ids更新表的某一个字段值,这时的 ...
- python接口自动化-重定向(Location)
一.重定向 1.重定向(redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置,从地址A跳转到地址B了. 2.重定向状态码: --301 redirect: 301 代表永久性转移( ...