【学习笔记】WebUploader+SpringMVC的实现方式

因项目需使用上传大文件功能，因此在网络上寻找目前可以支持大文件上传的插件。被推荐使用WebUploader。
目前研究了3天，写一下自己的一些开发中的问题。
有些代码是网络直接粘贴，并未做出处参考整理(因当时未保存出处，如果谁遇到了可以联系我修改，谢谢)
使用的后端框架是SpringMVC

首先肯定要确定，需要用到的引入项(这里用到的版本为webuploader-0.1.5)

要引入到项目中的文件在dist文件夹下
主要使用的文件为以下3个
Uploader.swf
webuploader.css
webuploader.js
因为想使用整体的功能，未使用其他的删除版本

<script type="text/javascript" src="<c:url value="/scripts/jquery-1.9.1.js"/>"></script><!--引入CSS--><link rel="stylesheet" href="<c:url value="/isdbs/demo/webupload/webuploader.css"/>" type="text/css" /><!--引入JS--><script type="text/javascript" src="<c:url value="/isdbs/demo/webupload/webuploader.js"/>"></script>

jquery版本看自己使用的版本，未测试可以支持的最低版本

<div id="uploader" class="wu-example">    <div class="btns">        <!-- 这个picker是用来选择文件的 -->        <div id="picker" style="display:inline"></div>        <!-- 如果未使用自动上传，点击按钮可以触发上传事件 -->        <div id="ctlBtn" class="uploadbutton" >上传</div>        <!-- 存放需上传的文件信息-->        <div id="thelist" class="uploader-list"></div>    </div>    <!-- 上传文件的遮罩，本身未添加该div，因说到上传文件时，如果直接进行其他操作会有什么影响，因此添加遮罩和提示信息避免误操作-->    <div id="uploadbg"></div>    <!-- 文件上传时的提示信息处理，包含进度条等信息-->    <div id="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>

下面是两个div遮罩样式

#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;}

重点还是JS的处理

//遮罩的方法function showdiv() {                $('#uploadbg').css("display","block");            $('#uploadshow').css("display","block");        }function hidediv() {            $('#uploadbg').css("display","none");            $('#uploadshow').css("display","none");        }var $list = $("#thelist");//定义上传文件显示的位置var fileSize = '';//获取文件大小var lastModiDate = '';//获取文件最后修改日期//初始化Web Uploadervar uploader = WebUploader.create({    swf: './demo/webupload/Uploader.swf',//swf文件路径    //http://${header["host"]}${pageContext.request.contextPath} 该路径为避免跨域错误出现使用。其他使用server处也需要这么书写    server: 'http://${header["host"]}${pageContext.request.contextPath}/webuploader/uploadFile',// 文件接收后台路径。    pick: {               id: '#picker',               name:"multiFile",  //这个地方 name 没什么用，虽然打开调试器，input的名字确实改过来了。但是提交到后台取不到文件。如果想自定义file的name属性，还是要和fileVal 配合使用。               label: '选择文件',               multiple:false   //默认为true，true表示可以多选文件，HTML5的属性          },    formData: {//上传时提交自身需要的字段并传递到后台。        "status":"file",        "uploadNum":"0000004730",        "existFlg":'false'    },    fileVal:'multiFile',    resize: false,    auto:true ,//是否自动上传    threads:3,//上传并发数。允许同时最大上传进程数。    chunked: true,  //分片处理    chunkSize: 10 * 1024 * 1024, //每片10M    fileNumLimit:1,//最大选择要上传的文件总数      disableGlobalDnd: true // 禁掉全局的拖拽功能。 });//移除文件的方法，未进行后端删除的添加function deleFile(fileId) {    uploader.removeFile(fileId,true);//调用方法删除文件队列    $('#'+fileId).remove();//清理页面元素};//上传按钮点击时触发$("#ctlBtn").on("click", function() {    uploader.upload();});//当有文件添加进来的时候uploader.on( 'fileQueued', function( file ) {    fileSize = file.size;//为文件大小赋值    var timestamp = Date.parse(new Date(file.lastModifiedDate));    timestamp = timestamp / 1000;    lastModiDate = timestamp;//获取文件最后修改时间，并转换成时间戳    $list.append( '<div id="' + file.id + '" class="item" style="display:inline">' +        '<h4 class="info" style="display:inline">' + file.name + '</h4>&nbsp;&nbsp;<div class="uploadbutton" id=\'deleBut_'+file.id+'\' onclick="deleFile(\''+file.id+'\');" >移除</div>' +    '</div>' );// 在文件上传的位置添加文件信息，可以修改    showdiv();//因为我设置的是自动上传，所以添加进来后，自动调用遮罩});//当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。uploader.on('uploadBeforeSend', function (obj, data, headers) {    data.lastModiDate = lastModiDate;//为formData赋值    data.fileSize = fileSize;});//文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( file, percentage ) {    $progress = $('#waitUpload');    $percent = $('#progressUpload');    $progress.text('正在上传，在此期间不要做其他操作，请耐心等待...');    $percent.css( 'width', percentage * 100 + '%' );    $percent.text((percentage * 100).toFixed(2) + '%');});//完成上传，不管成功或者失败，先把遮罩删除。uploader.on( 'uploadComplete', function( file ) {    hidediv();});// 文件上传成功之后进行的处理。uploader.on( 'uploadSuccess', function( file ,response  ) {    data.tableName = 'FILE_TABLE';    $success = $('#waitUpload');    $success.text('上传成功，正在合并文件，请耐心等待...');});// 文件上传失败，显示上传出错。这个目前没什么用，因为我把提示信息放在遮罩了，几乎是闪现不见，所以该方法可以再次修改uploader.on( 'uploadError', function( file ) {    $error = $('#waitUpload');    $error.text('上传失败，请移除文件后重新尝试上传...');});//日期格式化成时间字符串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; };  

上述即为前端使用的样式、元素以及JS了。

下面来看看后端需要书写的东西

    @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);                  // 得到所有的提交的表单域，也就是formData                  List<FileItem> fileItems = upload.parseRequest(request);                  String id = "";                  String fileName = "";                  // 如果大于1说明是分片处理                  int chunks = 1;                  int chunk = 0;                  long fileSize = 0;                long lastModiDate = 0;                String tableName = "";                FileItem tempFileItem = null;                  for (FileItem fileItem : fileItems) {                      if (fileItem.getFieldName().equals("id")) {                          id = fileItem.getString();                      } else if (fileItem.getFieldName().equals("name")) {                          fileName = new String(fileItem.getString().getBytes("ISO-8859-1"), "UTF-8");                      } 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("lastModiDate")) {                          lastModiDate = NumberUtils.toLong(fileItem.getString());                    } else if (fileItem.getFieldName().equals("tableName")) {                          tableName = fileItem.getString();                    }                }                  System.out.println(tableName);                String fileSysName = tempFileItem.getName();                String realname = lastModiDate+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;                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;    }

上述即为SpringMVC的上传方法了，目前已可以稳定上传。