SpringMVC异步实现多图片上传至本地服务器
2018-03-23 15:58
399 查看
今天又闲了一天，没事总结了一下SpringMVC异步上传的例子。。。
前段时间写一个上传到oss的例子，今天写一个上传到本地猫的例子把。。。。
由于项目使用了ajax所以导入fastjson
因为采用了AjaxSubmit的表单提交方式，所以引入jquey-form.js
这里采用了一个选择项，但是可以ctrl多个图片
切记这里的enctype为multipart/form-data
这里主要是把选择的多张图片上传到服务器的请求ajax
（0）用户选择一张或多张图片
（1）发送请求提交表单
（2）判断后台返回的message信息，作出用户提示
（3）上传成
abc8
功，循环拼接图片显示。
在每张图片上加了删除连接，根据上传图片的个数返回的下标进行图片删除（这里是假删除）。
大家有兴趣可以在发起一次请求实现数据库中的url删除或磁盘图片删除。
然后我们贴出逻辑代码。@Controller
public class UploadController {
@ResponseBody
@RequestMapping("upload.do")
public Map<String, String> upload(@RequestParam("mfile") MultipartFile[] mfile, HttpServletRequest request) throws IOException {
//这里mfile可以接受前台的文件，可以是一个，也可以是多个，这正是MultipartFile强大的地方。
HashMap<String, String> map=new HashMap<String, String>();
//建一个Map便于返回json
String filePath =null;String
fileName[]=new String[mfile.length];
//根据传递文件个数返回文件（{msg1:"sss.png",msg2:"aa.jpg"}）
if (mfile != null && mfile.length > 0) {
//判断使用有文件上传
for (int i = 0; i < mfile.length; i++) {
//循环上传（多文件上传）
try {
Calendar cale = null; cale = Calendar.getInstance(); int year = cale.get(Calendar.YEAR); int month = cale.get(Calendar.MONTH) + 1;
int day = cale.get(Calendar.DATE);
//给图片重命名加上日期前缀
filePath= request.getSession().getServletContext().getRealPath("/") ;
//获取服务器img文件夹地址（这里指的是local:8080/项目名/img）
fileName[i]= "/img/" + year + ""+ month + "" + day + "_" + mfile[i].getOriginalFilename();
//重命名图片。
String type = fileName[i].substring(fileName[i].lastIndexOf(".")+1, fileName[i].length());
//截取文件后缀判断是否是一张图片
if((type.equals("png"))||(type.equals("jpg"))||(type.equals("jpeg"))){
int length = mfile[i].getBytes().length;
if (!((length / 1000) > 5120)) {
//判断图片地址
map.put("msg"+i, fileName[i]);
//将图片输出到制定的文件夹目录中
mfile[i].transferTo(new File(filePath,fileName[i]));
}else{
map.put("msg", "图片过大");
}}else{
map.put("msg", "只能上传图片啊亲!");}
} catch (Exception e) {
e.printStackTrace();
map.put("msg", "上传失败");}}} else {
map.put("msg", "请选择文件");}
return map;
}
这样文件的上传过程就完成，还是一样有兴趣可以把图片url保存到数据库。（我比较懒（逃）
（1）单选或多选图片。
（2）打开提交。
点击删除。（不演示了，页面太丑了）
前段时间写一个上传到oss的例子，今天写一个上传到本地猫的例子把。。。。
准备工作
由于项目使用了maven，在这里先说下使用jar。1.pom依赖
<dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <!-- 文件上传 --> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.2</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.8</version> </dependency>
由于项目使用了ajax所以导入fastjson
2.SpringMVC配置
<!-- SpringMVC上传文件时，需要配置MultipartResolver处理器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="utf-8" /> <property name="maxUploadSize" value="10485760000" /> <property name="maxInMemorySize" value="40960" /> </bean>
3.静态资源导入
因为采用了AjaxSubmit的表单提交方式，所以引入jquey-form.js
4.页面展示（upload.jsp）
1)表单部分
<script
src="${pageContext.request.contextPath}/static/js/jquery-1.8.1.min.js"></script>
<script
src="${pageContext.request.contextPath}/static/js/jquery-form.js"></script>
<body>
<form id="uploadForm" name="uploadForm" enctype="multipart/form-data"
method="POST">
请选择：<input type="file" name="mfile" id="img" multiple>
<div id="c"></div>
<button class="btn" type="button" id="doSave">提交</button>
</form>
</body>这里采用了一个选择项，但是可以ctrl多个图片
切记这里的enctype为multipart/form-data
2）上传图片ajax部分
$(function() {
$("#doSave")
.click(
function() {
$("#uploadForm").ajaxSubmit(
{
url : "${pageContext.request.contextPath}/upload.do",
type : "POST",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
success : function(data) {
if (data.msg == '上传失败') {
alert(data.msg);
} else if (data.msg == '请选择文件') {
alert("上传文件不能为空");
} else if (data.msg == '只能上传图片啊亲!') {
alert(data.msg);
} else if (data.msg == '图片过大') {
alert(data.msg);
} else {
$("#c").empty();
$.each(data, function(index, item) {
$("#c").append('<img id=img' + index.substr(index.length - 1, index.length) +
' src="' + '${pageContext.request.contextPath}'
+ item + '" style="width: 300px;height: 300px; ">')
.append("<a id='del'"
+ index + ""
+ " href='javascript:delpic("
+ index.substr(index.length - 1, index.length)
+ ");' class='upload-img-del"
+ index.substr(index.length - 1, index.length) + "'>删除</a>");
});
}
}
});
});
});这里主要是把选择的多张图片上传到服务器的请求ajax
（0）用户选择一张或多张图片
（1）发送请求提交表单
（2）判断后台返回的message信息，作出用户提示
（3）上传成
abc8
功，循环拼接图片显示。
3）删除图片js部分
function delpic(i) {
$("#img" + i).attr("style", "display:none").attr("src", "");
$(".upload-img-del" + i).text("");
$(".upload-img-del" + i).html("");
}在每张图片上加了删除连接，根据上传图片的个数返回的下标进行图片删除（这里是假删除）。
大家有兴趣可以在发起一次请求实现数据库中的url删除或磁盘图片删除。
5.Controller部分
说这个之前，首先介绍下Multipart接口的常用方法。然后我们贴出逻辑代码。@Controller
public class UploadController {
@ResponseBody
@RequestMapping("upload.do")
public Map<String, String> upload(@RequestParam("mfile") MultipartFile[] mfile, HttpServletRequest request) throws IOException {
//这里mfile可以接受前台的文件，可以是一个，也可以是多个，这正是MultipartFile强大的地方。
HashMap<String, String> map=new HashMap<String, String>();
//建一个Map便于返回json
String filePath =null;String
fileName[]=new String[mfile.length];
//根据传递文件个数返回文件（{msg1:"sss.png",msg2:"aa.jpg"}）
if (mfile != null && mfile.length > 0) {
//判断使用有文件上传
for (int i = 0; i < mfile.length; i++) {
//循环上传（多文件上传）
try {
Calendar cale = null; cale = Calendar.getInstance(); int year = cale.get(Calendar.YEAR); int month = cale.get(Calendar.MONTH) + 1;
int day = cale.get(Calendar.DATE);
//给图片重命名加上日期前缀
filePath= request.getSession().getServletContext().getRealPath("/") ;
//获取服务器img文件夹地址（这里指的是local:8080/项目名/img）
fileName[i]= "/img/" + year + ""+ month + "" + day + "_" + mfile[i].getOriginalFilename();
//重命名图片。
String type = fileName[i].substring(fileName[i].lastIndexOf(".")+1, fileName[i].length());
//截取文件后缀判断是否是一张图片
if((type.equals("png"))||(type.equals("jpg"))||(type.equals("jpeg"))){
int length = mfile[i].getBytes().length;
if (!((length / 1000) > 5120)) {
//判断图片地址
map.put("msg"+i, fileName[i]);
//将图片输出到制定的文件夹目录中
mfile[i].transferTo(new File(filePath,fileName[i]));
}else{
map.put("msg", "图片过大");
}}else{
map.put("msg", "只能上传图片啊亲!");}
} catch (Exception e) {
e.printStackTrace();
map.put("msg", "上传失败");}}} else {
map.put("msg", "请选择文件");}
return map;
}
这样文件的上传过程就完成，还是一样有兴趣可以把图片url保存到数据库。（我比较懒（逃）
6.总结
其实文件的上传过程就是获取图片流，规范图片格式，然后写入的过程。看看效果图（1）单选或多选图片。
（2）打开提交。
点击删除。（不演示了，页面太丑了）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用SpringMvc跨服务器上传图片，Ajax异步刷新图片框显示图片功能请求不到后台，onChange事件没有激活的源码？
- SpringMVC实现FTP服务器之图片和富文本上传
- JavaScript实现图片本地预览功能【不用上传至服务器】
- JS实现本地图片在线图片预览无需上传服务器
- SpringMvc异步图片上传回显（使用jersey上传到另一台服务器）
- MVC异步上传图片到本地/服务器
- 图片上传--SpringMVC实现RESTful接口
- 异步上传图片实现思路
- jquery实现图片上传前本地预览功能
- cropper配合ajaxupload实现图片截图与上传并上传至远程服务器地址
- SpringMVC使用MultipartFile 实现异步上传方法介绍
- Java实现图片上传到服务器，并把上传的图片读取出来
- Jquery实现异步上传图片
- 利用FileReader实现上传图片前本地预览
- ajax实现异步文件（图片）上传功能
- android异步加载图片并缓存到本地实现方法
- php+js实现异步图片上传实例分享
- Android仿QQ空间发说说实现上传图片到服务器（带缩略图的）
- Android开发：相册读取、拍照、图片裁剪和图片上传服务器等功能的实现
- 选择本地图片上传到服务器进行头像设置以及文件下载