版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36481052/article/details/78806944
最近在项目上使用过批量上传图片,顺便给大家分享一下!!!!
首先的引入一个jar包:
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
下面是批量上传图片效果
Controller:
@Controller
@RequestMapping("/file/")
public class UserController {
@RequestMapping("batchFileUpload")
@ResponseBody
public Map<String,Object> batchFileUpload(@RequestParam(value = "file") MultipartFile file) {
//批量上传
String str = UploadAction.ajaxFileUpload(file);
//输出文件地址
System.out.println("地址是:"+str);
}
}
批量上传工具类:
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.util.*;
public class Upload {
/*
* 批量上传图片方法
* */
public static String batchFileUpload(MultipartFile file){
try {
//文件存储位置
String path="D:/photo/";
//这是一个访问路径(如果不配置是访问不到图片的)
String basePath="http://192.168.0.00:8080/photo/";
//获取文件名称
String fileName = file.getOriginalFilename(); //prefix suffix
String suffix=fileName.substring(fileName.lastIndexOf("."));
//生成新的文件名
String newFileName= UUID.randomUUID().toString()+suffix;
//创建文件
File targetFile = new File(path, newFileName);
//是否存在
if(!targetFile.exists()){
targetFile.mkdirs();
}
file.transferTo(targetFile);
System.out.println("上传成功:"+basePath+newFileName);
return basePath+newFileName;
} catch (Exception e) {
e.printStackTrace();
}
return "上传失败...";
}
}
下面贴出jsp页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>批量上传图片DEMO</title>
<link rel="stylesheet" href="<%=basePath%>zyupload/skins/zyupload-1.0.0.css " type="text/css">
</head>
<body>
<h1 style="text-align:center;">photo Demo</h1>
<div style="position: absolute;top: 100px; left: 20px;">
</div>
<div id="zyupload" class="zyupload"></div>
</body>
<script type="text/javascript" src="<%=basePath%>jquery-1.7.2.js"></script>
<script type="text/javascript" src="<%=basePath%>zyupload/zyupload-1.0.0.js"></script>
<script type="text/javascript">
$(function(){
contentPath='<%=basePath%>';
// 初始化插件
$("#zyupload").zyUpload({
width : "650px", // 宽度
height : "400px", // 宽度
itemWidth : "140px", // 文件项的宽度
itemHeight : "115px", // 文件项的高度
url : contentPath+"/file/batchFileUpload.do", // 上传文件的路径
fileType : ["jpg","png","PNG","JPG"],// 上传文件的类型
fileSize : 51200000, // 上传文件的大小
multiple : true, // 是否可以多个文件上传
dragDrop : true, // 是否可以拖动上传文件
tailor : true, // 是否可以裁剪图片
del : true, // 是否可以删除文件
finishDel : true, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
// 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
onSelect: function(selectFiles, allFiles){
},
// 删除一个文件的回调方法
onDelete: function(file){
alert("当前删除了此文件:"+file.name);
},
// 每文件上传成功的回调方法
onSuccess: function(file, response){
alert("此文件上传成功:"+file.name);
var data = JSON.parse(response);
alert(data.rc+","+data.msg+","+data.value);
},
// 文件上传失败的回调方法
onFailure: function(file, response){
alert("此文件上传失败:"+file.name);
},
// 上传完成的回调方法
onComplete: function(response){
alert("所有文件上传完成!!!");
var data = JSON.parse(response);
alert(data.rc+","+data.msg+","+data.value);
}
});
});
</script>
</html>
下面是js和CSS样式文件:
链接: https://pan.baidu.com/s/1hs6GWM4 密码: ic4r
如果是上传成功,访问404 ,请看下篇博客。