zyUpload结合SpringMVC实现批量图片的上传
zyUpload是一款优秀的图片批量上传插件，浏览器兼容性强，应用方便便捷，特别适用于批量图片（当然不仅仅支持图片）文件的上传。这里我结合自己开发的一个例子，讲解下zyUpload结合SpringMVC实现图片的批量上传。网上有另外一种方式实现，那就是基于serverlet实现，由于这种方式我没有用到，所以这里就不进行说明，有需要的同学查看这里(http://52doit.com/doit/show/341)，并且有提供源码，感谢这位同学。
一、jsp页面代码
首先jsp页面引入相关的css和js文件，代码如下：
<head>
<link rel="stylesheet" href="${ctxStatic}/plugins/zyupload/skins/zyupload-1.0.0.min.css " type="text/css">
<script type="text/javascript" src="${ctxStatic}/plugins/zyupload/zyupload.basic-1.0.0.min.js">script>
head>接着，调用相关的js函数，实现上传图形界面的显示，代码如下：
<script type="text/javascript">
$(function(){
// 初始化插件
$("#zyupload").zyUpload({
width : "800px", // 宽度
height : "450px", // 高度
itemWidth : "130px", // 文件项的宽度
itemHeight : "115px", // 文件项的高度
addImgUrl : "${ctxStatic}/plugins/", //新增文件图片路径
url : "${ctx}/jcsl/uploadBat?uuid=${uuid}&jcxid=${jcxid}", // 上传文件的路径
fileType : ["jpg","png","jpeg"],// 上传文件的类型
fileSize : 51200000, // 上传文件的大小
multiple : true, // 是否可以多个文件上传
dragDrop : false, // 是否可以拖动上传文件
tailor : false, // 是否可以裁剪图片
del : true, // 是否可以删除文件
finishDel : false, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
onSelect: function(selectFiles, allFiles){ // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
console.info("当前选择了以下文件：");
console.info(selectFiles);
},
onDelete: function(file, files){ // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件
console.info("当前删除了此文件：");
console.info(file.name);
},
onSuccess: function(file, response){ // 文件上传成功的回调方法
console.info("此文件上传成功：");
console.info(file.name);
console.info("此文件上传到服务器地址：");
console.info(response);
$("#uploadInf").append("【"
+file.name+"】上传成功!");
},
onFailure: function(file, response){ // 文件上传失败的回调方法
console.info("此文件上传失败：");
console.info(file.name);
},
onComplete: function(response){ // 上传完成的回调方法
console.info("文件上传完成");
console.info(response);
}
});
});
script> 最后，只需要一个div标签，就可以显示上传界面，代码如下所示：
<div id="zyupload" class="zyupload">div> jsp页面就完成了，接下来需要在方法中实现文件的具体保存功能。当然，实现的方法有千千万，我的这种方法可能不是最好的，欢迎小伙伴们提出建议。
首先，穿件一个图片文件保存的类，代码如下所示：
package cn.gov.hbmsa.gjfgltx.util;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.multipart.MultipartFile;
/**
* 基于Spring MVC 实现文件上传
* @author sungq
*
*/
public class AttUploadTool {
public FileUpLoadEntrty uploadAttachment(String savePath,HttpServletRequest request,MultipartFile file) throws IOException {
FileUpLoadEntrty fileUpLoadEntrty = new FileUpLoadEntrty();
String contextPath=request.getRealPath("/");//获取系统的绝对路径
String visName= "";//虚拟名称
if (file.isEmpty()) {
fileUpLoadEntrty.setIsSuccess(false); //保存失败
}else {
//判断路径是否存在，否则创建
File filePath = new File(contextPath+savePath+"/");
if (!filePath.exists()) {
//创建临时目录
filePath.mkdir();
}
visName = makeFileName(file.getOriginalFilename());
File tempFile=new File(contextPath+savePath+"/"+visName);
if (!tempFile.exists()) {
tempFile.createNewFile();
}
file.transferTo(tempFile);
fileUpLoadEntrty.setFileName(file.getOriginalFilename());
fileUpLoadEntrty.setVisName(visName);
fileUpLoadEntrty.setSavePath(contextPath+savePath+"/"+visName);
fileUpLoadEntrty.setSaveDate(new Date());
fileUpLoadEntrty.setIsSuccess(true);
}
return fileUpLoadEntrty;
}
/**
* @Method: makeFileName
* @Description: 生成上传文件的文件名，文件名以：uuid+"."+文件类型
* @Anthor:sungq
* @param fileName类型
* @return uuid+"_"+文件的类型
*/
private String makeFileName(String fileName){
//为防止文件覆盖的现象发生，要为上传文件产生一个唯一的文件名
return UUID.randomUUID().toString().replace("-","") + "."+ fileName.substring(fileName.lastIndexOf(".") + 1);
}
/**
* 删除本地文件
* @param fileVisNnme 文件虚拟名称
* @param filePath 文件的路径
* @return
*/
public Boolean DeleteAttachment(String fileVisNnme,String filePath,HttpServletRequest request){
String contextPath=request.getRealPath("/");//获取系统的绝对路径
String fileUrl = contextPath + filePath + fileVisNnme;
File file = new File(fileUrl);
if(file.exists()){
boolean isSuccess = file.delete();
if(isSuccess){
return true;
}else{
return false;
}
}else{
return false;
}
}
}通过这个类，只要传入相关的参数，就可以将文件保存至相应的路径下面。
一下方法就是实现具体调用的方法，代码如下：
/**
* 检查实例附件批量上传
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
@RequestMapping(value = "uploadBat", method = RequestMethod.POST)
@ResponseBody
public void uploadBat(HttpServletRequest request, HttpServletResponse response, jcsl vo)throws ServletException, IOException {
String userId = "linz"; // 操作人id
UUID uuid = UUID.randomUUID();
String uid = uuid.toString().replace("-", "");
String jcxid = request.getParameter("jcxid");// 得到检查项id
String ywslid = request.getParameter("uuid");// 得到业务实例id
String jcxmc = jcxmservice.selectById(jcxid).getJcxmc();// 得到检查项名称
// 文件保存至本地服务器
AttUploadTool attUploadTool = new AttUploadTool();
FileUpLoadEntrty fileUpLoadEntrty = new FileUpLoadEntrty();
// 创建一个通用的多部分解析器
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
// 判断 request 是否有文件上传,即多部分请求
if (multipartResolver.isMultipart(request)) {
// 转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 取得request中的所有文件名
Iterator iter = multiRequest.getFileNames();
while (iter.hasNext()) {
// 取得上传文件
MultipartFile file = multiRequest.getFile(iter.next());
// 取得当前上传文件的文 件名称
String fileName = file.getOriginalFilename();
fileUpLoadEntrty = attUploadTool.uploadAttachment("/upload", request, file);
}
}
} 大家通过观察可以发现，在上面js代码中的url参数调用的正是上面的方法。这样就实现了图片文件的批量上传，当然在这个方法当中，还可以实现其它的逻辑，例如将文件的信息保存在数据库中等等。
具体效果如下图所示：
这样就实现了图片的批量上传。