webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码

enctype="multipart/form-data"

<!-- 上传拦截，如最大上传值及最小上传值 -->   <!--新增加的webuploader上传组件,必须要屏蔽这里的拦截机制    <bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >        <property name="maxUploadSize">          <value>1073741824</value>         </property>         <property name="maxInMemorySize">           <value>1073741824</value>         </property>          <property name="defaultEncoding">           <value>utf-8</value>         </property>    </bean>    --> 

<link rel="stylesheet" href="static/css/webuploader.css" rel="external nofollow" /> 

<script type="text/javascript" src="static/js/webuploader.js"></script>     <script type="text/javascript" src="static/js/webuploader.min.js"></script>     <script type="text/javascript" src="static/js/upload3.js"></script> 

<div id="uploader">             <!--用来存放文件信息-->             <div id="thelist"></div>             <div>               <div id="attach"></div>               <!-- <input type="button" value="上传" id="upload"/> -->             </div>           </div> 

/*********************************WebUpload 单文件上传 begin*****************************************/ $(function(){   var $list = $("#thelist");   var uploader ;// 实例化     uploader = WebUploader.create({        auto:true, //是否自动上传       pick: {         id: '#attach',         name:"multiFile", //这个地方 name 没什么用，和fileVal 配合使用。         label: '点击选择文件,会自动上传',         multiple:false //默认为true，true表示可以多选文件，HTML5的属性       },       swf: '../Uploader.swf', //在这里必需要引入swf文件，webuploader初始化要用       fileVal:'multiFile', //提交到到后台，是要用"multiFile"这个名称属性来取文件的       server: "myPractice/webUploader.do",       duplicate:true,//是否可重复选择同一文件       resize: false,       chunked: true, //分片处理       chunkSize: 20 * 1024 * 1024, //每片20M       chunkRetry:2,//如果失败，则不重试       threads:1,//上传并发数。允许同时最大上传进程数。       fileNumLimit:1,//上传的文件总数       // 禁掉全局的拖拽功能。       disableGlobalDnd: true     });      // 当有文件添加进来的时候     uploader.on( "fileQueued", function( file ) {       console.log("fileQueued:");       $list.append( "<div id='"+ file.id + "' class='item'>" +         "<h4 class='info'>" + file.name + "</h4>" +         "<p class='state'>正在上传...</p>" +       "</div>" );     });     //当所有文件上传结束时触发     uploader.on("uploadFinished",function(){       console.log("uploadFinished:");     })     //当文件上传成功时触发。     uploader.on( "uploadSuccess", function( file ,response) { //     alert(file.name);       $( "#"+file.id ).find("p.state").text("已上传");     });     uploader.on( "uploadError", function( file ) {       $( "#"+file.id ).find("p.state").text("上传出错");       uploader.cancelFile(file);       uploader.removeFile(file,true);       uploader.reset();     });     //如果是手动上传,用下面的事件,并启用jsp页面上的上传按钮 //    $("#upload").on("click", function() { //      uploader.upload(); //    }) }); /*********************************WebUpload 单文件上传 end*******************************************/ 

@Controller @RequestMapping(value="/myPractice")<span style="font-family: Arial, Helvetica, sans-serif;">//这里就是表明上传组件怎么通过server属性找到后端代码的,不要太在意细节</span> public class MyPracticeController extends BaseController { <span> </span> @RequestMapping(method = {RequestMethod.POST}, value = {"/webUploader"}) @ResponseBody public void webUploader(HttpServletRequest request, HttpServletResponse response) throws Exception {   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 = "";         String fileName = "";         // 如果大于1说明是分片处理         int chunks = 1;         int chunk = 0;         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;           }         }         //session中的参数设置获取是我自己的原因,文件名你们可以直接使用fileName,这个是原来的文件名         String fileSysName = this.getRequest().getSession().getAttribute("fileSysName").toString();         String realname = fileSysName+fileName.substring(fileName.lastIndexOf("."));//转化后的文件名         this.getRequest().getSession().setAttribute("realname",realname);         String filePath = Const.VIDEOPATHFILE + "sound/";//文件上传路径         // 临时目录用来存放所有分片文件         String tempFileDir = filePath + id;         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);         } else {           // 临时文件创建失败           if (chunk == chunks -1) {             FileUtils.deleteDirectory(parentFileDir);           }         }       }     } catch (Exception e) {       logger.error(e.getMessage(), e);     } } 

<pre name="code" class="html">webuploader.min.js</pre><pre name="code" class="html"><pre name="code" class="html">webuploader.js</pre><pre name="code" class="html">webuploader.css</pre><pre name="code" class="html">这4个公共文件从官网可以下载,都一样.<pre name="code" class="plain">最后,文件上传后页面样式是</pre><pre name="code" class="plain"><pre name="code" class="html"><img src="http://img.blog.csdn.net/20170418112230338?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ2xvbmcxOTkwNDIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""> </pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <p></p> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre> </pre></pre></pre>