您好,登录后才能下订单哦!
注意:
1,webuploader上传组件会和jQuery自带的上传组件冲突,所以不要使用<form>标签中添加上传文件的属性;
enctype="multipart/form-data"
2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置!
<!-- 上传拦截,如最大上传值及最小上传值 --> <!--新增加的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> -->
下面正式开始前后台代码开发:
1.在页面jsp文件中,调用webuploader组件的公共文件
<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>
因为我用的是自动上传,所以注释了上传按钮,upload3.js里也注释了相对的上传按钮的点击方法.
2.真正的上传组件代码是upload3.js,里面介绍了webuploader的初始化,分片,各种参数,具体可以参考官网上的API
/*********************************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'>" + "<h5 class='info'>" + file.name + "</h5>" + "<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*******************************************/
3.前台完毕之后,需要找到后台Java代码,实现上传到服务器的功能,webuploader组件中server属性就是指向服务端代码:
@Controller @RequestMapping(value="/myPractice")<span >//这里就是表明上传组件怎么通过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); } }
到这里基本完了,webuploader前后台设计的代码就这些,
Uploader.swf
<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>
以上所述是小编给大家介绍的webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。