【学习笔记】SpringMvc+WebUploader整合处理
2017-11-01 10:05
344 查看
前一篇为首次处理后的学习,然后因所用的地方较多,且准备把上传的方法整合到表单页面中去,因此进行了抽象工作。
【学习笔记】WebUploader+SpringMVC的实现方式
因为要抽象,首先要把目前想要抽象的信息都整理出来
目前我整理了一份追加的js用来抽象script的存放
以下为自身抽象的webuploader.extend.js中的内容【内容略做修改,不影响使用】
下面为实现上传功能的前端jsp代码
在使用时,添加了自己使用的css样式,目前直接在原webuploader.css中添加
上传的方法,和之前的版本相比未做大量改动
至此抽象功能完成,后续的就是和业务如何关联的问题了,目前是使用的是,返回的map中存放上传的文件信息,最后进行文件的数据保存处理,删除时,未做移除删除本地文件的功能,可以后续自行添加。
【学习笔记】WebUploader+SpringMVC的实现方式
因为要抽象,首先要把目前想要抽象的信息都整理出来
目前我整理了一份追加的js用来抽象script的存放
以下为自身抽象的webuploader.extend.js中的内容【内容略做修改,不影响使用】
/** * 根据传递的时间转换为yyyy-MM-dd hh:mm:ss * * @param fmt 要转换的日期,如new Date() * */ Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours(), //小时 "m+" : this.getMinutes(), //分 "s+" : this.getSeconds(), //秒 "q+" : Math.floor((this.getMonth()+3)/3), //季度 "S" : this.getMilliseconds() //毫秒 }; if(/(y+)/.test(fmt)) { fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(var k in o) { if(new RegExp("("+ k +")").test(fmt)){ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); } } return fmt; }; /** * 根据传递的页面元素对象,进行遮罩的处理 * * @param uploadbg 遮罩层div * * @param uploadshow 遮罩层中显示文件上传信息的div * */ function showdiv(uploadbg,uploadshow) { $('#' + uploadbg).css("display","block"); $('#' + uploadshow).css("display","block"); } function hidediv(uploadbg,uploadshow) { $('#' + uploadbg).css("display","none"); $('#' + uploadshow).css("display","none"); } /** * 根据传递的值,进行WebUploader容器对象的生成 * * @param picker 放置文件的的DIV id * * @param uploadParamsObj 需要传递的信息集合 * 主要包含 var uploadParams = { context: contextInfo, //此处为项目的全部地址 必须 list : 'thelist', //上传文件的位置 必须 fileSize : '', //文件的大小 必须 nowDate : '', //文件上传的时间 必须 auto : true, //是否自动上传 fileNumLimit: 1, //上传文件的个数 threads:3, //开启的上传文件并发数量 chunked: true, //是否开启分片上传 chunkSize: 10 * 1024 * 1024, //分片上传的大小,默认为10M fileSizeLimit : 50 * 1024 * 1024, //最大上传文件的大小,默认为50M fileSizeLimitCN : '50M', //最大上传文件的大小中文提示,默认为50M uploadbg : 'uploadbg', //遮罩层div 必须 uploadshow : 'uploadshow', //遮罩层中显示文件上传信息的div 必须 waitUpload : 'waitUpload', //显示上传时的提示信息 必须 progressUpload : 'progressUpload', //显示上传时的进度条信息 必须 tableName : 'FILE_TABLE', // 上传附件的表名 必须 realFileName : 'realName', //上传附件的真实存储名称ID 必须 oldFileName : 'fileName' //上传文件的原始名称ID 必须 }; * */ function uploadObj(picker,uploadParamsObj){ var $list = $('#'+uploadParams.list); var $waitUpload = $('#'+uploadParams.waitUpload); var $progressUpload = $('#'+uploadParams.progressUpload); var uploader = WebUploader.create({ swf: '/script/Uploader.swf',// swf文件路径 server: uploadParams.context+'/webuploader/uploadFile',// 文件接收后台路径。 pick: { id: '#'+picker, //放置文件的ID,需传递值 name:"multiFile", //定义file的name属性,还是要和fileVal 配合使用。不建议修改 label: '选择文件', multiple:false //默认为true,true表示可以多选文件,HTML5的属性 }, formData: {//传递参数使用 "status":"file" }, fileVal:'multiFile',//这个和后台的获取有关,不建议修改 resize: false, auto: uploadParamsObj.auto != undefined ? uploadParamsObj.auto : true,//是否自动上传 ,true为自动上传,false为手动上传 threads:uploadParamsObj.threads != undefined ? uploadParamsObj.threads : 3,//上传并发数。允许同时最大上传进程数。建议使用3,最大不能超过6 chunked: uploadParamsObj.chunked != undefined ? uploadParamsObj.chunked : true, //分片处理 chunkSize: uploadParamsObj.chunkSize != undefined ? uploadParamsObj.chunkSize : 10 * 1024 * 1024, //每片10M fileNumLimit:1,//上传的文件总数 disableGlobalDnd: true // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。 }); //当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) { uploadParams.fileSize = file.size; var timestampnow = Date.parse(new Date()); timestampnow = timestampnow / 1000; uploadParams.nowDate = timestampnow; $list.append( '<div id="' + file.id + '" class="item" style="display:inline">' + '<h4 class="info" style="display:inline">' + file.name + '</h4> ' + '<div id=\'deleBut_'+file.id+'\' onclick="deleFile(\''+file.id+'\');" class="uploadbutton">移除</div>' + '</div>' ); showdiv(uploadParamsObj.uploadbg,uploadParamsObj.uploadshow); }); //当某个文件的分块在发送前触发,主要用来询问是否要添加附带参数,大文件在开起分片上传的前提下此事件可能会触发多次。 uploader.on('uploadBeforeSend', function (obj, data, headers) { data.nowDate = uploadParams.nowDate; data.fileSize = uploadParams.fileSize; data.tableName = uploadParams.tableName; }); //文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { $waitUpload.text('正在上传,在此期间不要做其他操作,请耐心等待...'); $progressUpload.css( 'width', percentage * 100 + '%' ); $progressUpload.text((percentage * 100).toFixed(2) + '%'); }); //完成上传完了,成功或者失败,先删除进度条。 uploader.on( 'uploadComplete', function( file ) { $('#'+picker).hide(); hidediv(uploadParamsObj.uploadbg,uploadParamsObj.uploadshow); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file ,response ) { $('#'+uploadParams.realFileName).val(response.realname); $('#'+uploadParams.oldFileName).val(response.fileSysName); $waitUpload.text('上传成功,正在合并文件,请耐心等待...'); }); // 文件上传失败,显示上传出错。 uploader.on( 'uploadError', function( file ) { $waitUpload.text('上传失败,请移除文件后重新尝试上传...'); }); uploader.on( 'beforeFileQueued', function( file ) { var fileSizeLimit = uploadParams.fileSizeLimit; if(file.size > fileSizeLimit){ if(uploadParamsObj.fileSizeLimitCN != undefined){ alert('文件超出'+uploadParams.fileSizeLimitCN+',无法上传'); } else { alert('文件超出50M,无法上传'); } return false; } else { return true; } }); return uploader; }
下面为实现上传功能的前端jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="c.tld" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="<c:url value="/scripts/jquery-1.9.1.js"/>"></script> <!--引入CSS--> <link rel="stylesheet" href="<c:url value="/styles/webuploader.css"/>" type="text/css" /> <!--引入JS--> <script type="text/javascript" src="<c:url value="/scripts/webuploader.js"/>"></script> <script type="text/javascript" src="<c:url value="/scripts/webuploader.extend.js"/>"></script> </head> <body> <div id="uploader" class="wu-example"> <div class="btns"> <div id="picker" style="display:inline"></div> <div id="ctlBtn" class="uploadbutton" >上传</div> <div id="thelist" class="uploader-list"></div> </div> <div id="uploadbg" class='uploadbg'></div> <div id="uploadshow" class='uploadshow'> <font color='#EE7621'><label class="state" id="waitUpload">等待上传...</label></font> <div class="progress" style="position: absolute;height:30px;width:300px;"> <p id="progressUpload" style="top:0px;position: absolute;transform: translate(0%,0%);font-size: 10px;height:15px;width:0px;background-color:#E0FFFF;text-align:center">0%</p> </div> </div> </div> <script type="text/javascript"> //初始化Web Uploader var contextInfo = 'http://'+'${header["host"]}'+'${pageContext.request.contextPath}'; var uploadParams = { context: contextInfo, //此处为项目的全部地址 list : 'thelist', //上传文件的位置 fileSize : '', //文件的大小 nowDate : '', //文件上传的时间 auto : true, //是否自动上传 fileNumLimit: 1, //上传文件的个数 threads:3, //开启的上传文件并发数量 chunked: true, //是否开启分片上传 chunkSize: 10 * 1024 * 1024, //分片上传的大小,默认为10M fileSizeLimit : 50 * 1024 * 1024, //最大上传文件的大小,默认为50M fileSizeLimitCN : '50M', //最大上传文件的大小中文提示,默认为50M uploadbg : 'uploadbg', //遮罩层div uploadshow : 'uploadshow', //遮罩层中显示文件上传信息的div waitUpload : 'waitUpload', //显示上传时的提示信息 progressUpload : 'progressUpload', //显示上传时的进度条信息 tableName : 'FileTable', // 上传附件的表名 realFileName : 'realName', //上传附件的真实存储名称ID oldFileName : 'fileName' //上传文件的原始名称ID }; var uploader = uploadObj('picker',uploadParams); /** * 移除文件使用,未删除后台已上传文件,可以自行后续修改,添加ajax方法即可 * * @param fileId 上传的文件ID,在一个页面中自动生成,唯一 * * @param uploader 上传容器对象 * * 删除文件这个,抽象时发现部分信息传递出现问题,因此未放到抽象js中 * */ function deleFile(fileId) { uploader.removeFile(fileId,true); $('#'+fileId).remove(); $('#picker').show(); }; </script> </body> </html>
在使用时,添加了自己使用的css样式,目前直接在原webuploader.css中添加
.webuploader-container { position: relative; } .webuploader-element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px); } .webuploader-pick { position: relative; display: inline-block; cursor: pointer; background: #00b7ee; padding: 4px 6px; color: #fff; text-align: center; border-radius: 3px; overflow: hidden; } .webuploader-pick-hover { background: #00a2d4; } .webuploader-pick-disable { opacity: 0.6; pointer-events:none; } /* 自身添加的样式表 */ .uploadbutton { position: relative; display: inline-block; cursor: pointer; background: #00b7ee; padding: 4px 6px; color: #fff; text-align: center; border-radius: 3px; overflow: hidden; } .uploadbutton-hover { background: #00a2d4; } .uploadbutton-disable { opacity: 0.6; pointer-events:none; } .uploadbg { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #EBEBEB; z-index: 1001; -moz-opacity: 0.7; opacity: .70; filter: alpha(opacity = 70); } .uploadshow { display: none; position: absolute; top: 45%; left: 30%; width: 40%; height: 10%; padding: 8px; border: 0px solid #F1F1F1; background-color: #F1F1F1; z-index: 1002; overflow: auto; }
上传的方法,和之前的版本相比未做大量改动
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST) @ResponseBody public Map<String, String> uploadFile(HttpServletRequest request, HttpServletResponse response) throws Exception { Map<String, String> sMap = new HashMap<String, String>(); try { boolean isMultipart = ServletFileUpload.isMultipartContent(request); if (isMultipart) { FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); // 得到所有的表单域,它们目前都被当作FileItem List<FileItem> fileItems = upload.parseRequest(request); String id = ""; // 如果大于1说明是分片处理 int chunks = 1; int chunk = 0; long fileSize = 0; long nowDate = 0; String tableName = ""; FileItem tempFileItem = null; for (FileItem fileItem : fileItems) { if (fileItem.getFieldName().equals("id")) { id = fileItem.getString(); } else if (fileItem.getFieldName().equals("chunks")) { chunks = NumberUtils.toInt(fileItem.getString()); } else if (fileItem.getFieldName().equals("chunk")) { chunk = NumberUtils.toInt(fileItem.getString()); } else if (fileItem.getFieldName().equals("multiFile")) { tempFileItem = fileItem; } else if (fileItem.getFieldName().equals("fileSize")) { fileSize = NumberUtils.toLong(fileItem.getString()); } else if (fileItem.getFieldName().equals("tableName")) { tableName = fileItem.getString(); } else if (fileItem.getFieldName().equals("nowDate")) { nowDate = NumberUtils.toLong(fileItem.getString()); } } String fileSysName = tempFileItem.getName(); String realname = nowDate+fileSysName.substring(fileSysName.lastIndexOf("."));//转化后的文件名 sMap.put("fileSysName", fileSysName); sMap.put("realname", realname); // String realPath = Constants.ROOT_FILE_PATH; realPath = realPath + File.separator + tableName.toUpperCase() + File.separator; String filePath = realPath;//文件上传路径 // 临时目录用来存放所有分片文件 String tempFileDir = filePath + id + "_" + fileSize + "_" + nowDate; File parentFileDir = new File(tempFileDir); if (!parentFileDir.exists()) { parentFileDir.mkdirs(); } // 分片处理时,前台会多次调用上传接口,每次都会上传文件的一部分到后台 File tempPartFile = new File(parentFileDir, realname + "_" + chunk + ".part"); FileUtils.copyInputStreamToFile(tempFileItem.getInputStream(), tempPartFile); // 是否全部上传完成 // 所有分片都存在才说明整个文件上传完成 boolean uploadDone = true; for (int i = 0; i < chunks; i++) { File partFile = new File(parentFileDir, realname + "_" + i + ".part"); if (!partFile.exists()) { uploadDone = false; } } // 所有分片文件都上传完成 // 将所有分片文件合并到一个文件中 if (uploadDone) { // 得到 destTempFile 就是最终的文件 File destTempFile = new File(filePath, realname); for (int i = 0; i < chunks; i++) { File partFile = new File(parentFileDir, realname + "_" + i + ".part"); FileOutputStream destTempfos = new FileOutputStream(destTempFile, true); //遍历"所有分片文件"到"最终文件"中 FileUtils.copyFile(partFile, destTempfos); destTempfos.close(); } // 删除临时目录中的分片文件 FileUtils.deleteDirectory(parentFileDir); } } } catch (Exception e) { logger.error(e.getMessage(), e); } return sMap; }
至此抽象功能完成,后续的就是和业务如何关联的问题了,目前是使用的是,返回的map中存放上传的文件信息,最后进行文件的数据保存处理,删除时,未做移除删除本地文件的功能,可以后续自行添加。
相关文章推荐
- Maven学习笔记(十)-Maven整合SSHSJ(Spring+SpringMVC+Hibernate+Spring Data JPA+JdbcTemplate)框架
- Maven学习笔记(五)-Maven整合SSM(spring+springMVC+Mybatis)框架
- Spring Web MVC 的学习笔记
- springMVC学习笔记---day02 springMVC+spring+mybatis整合开发框架搭建
- SPRING Web MVC 学习笔记--启动过程
- spring: web学习笔记1--异常处理:No adapter for handler
- Java 学习笔记09:Spring搭建MVC WEB项目
- springMVC学习笔记,SpringMV与web项目的整合(注解方式)
- Java Web 学习笔记(四) 基于 SpringMVC+BootStrap 创建WebApp
- Spring+SpringMVC+Mybatis框架整合例子(SSM) 学习笔记
- Spring.NET学习笔记19——整合NHibernate和ASP.NET MVC(基础篇) Level 300
- 【Spring学习笔记-MVC-15】Spring MVC之异常处理
- springMVC学习笔记,SpringMV与web项目的整合(xml方式)
- Spring学习笔记----三大框架(Spring+SpringMVC+MyBatis)整合详细教程
- Spring.NET学习笔记26——整合NVelocity(应用篇)
- Spring Web MVC框架学习笔记
- Sharepoint学习笔记---如何在Sharepoint2010网站中整合Crystal Report水晶报表(报表登录处理)
- SSH整合学习笔记之spring与hibernate整合(二)--C3P0
- struts2学习笔记之spring整合
- Spring MVC 学习笔记 what's new in spring mvc 3.1