分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 网页技术

webUploader大文件断点续传学习心得 ?多文件

发布时间：2023-09-06 01:35责任编辑：郭大石关键词：暂无标签

二、Jsp代码：

[javascript]view plaincopy
  1. <!--断点续传start-->
  2. <!--隐藏域实时保存上传进度-->
  3. <inputtype="hidden"/>
  4. <div>
  5. <labelstyle="font-weight:100;float:left;margin-left:15px;width:144px;margin-right:15px;">大文件：</label>
  6. <div>
  7. <div>
  8. <div>选择文件</div>
  9. <divstyle="position:absolute;top:0px;left:0px;width:88px;height:35px;overflow:hidden;bottom:auto;right:auto;">
  10. <inputname="file"type="file"/>
  11. <labelstyle="opacity:0;width:100%;height:100%;display:block;cursor:pointer;background:rgb(255,255,255)nonerepeatscroll0%0%;"></label>
  12. </div>
  13. </div>
  14. <!--文件列表：选择文件后在该div显示-->
  15. <divstyle="margin-left:160px;"></div>
  16. <labelstyle="font-weight:100;float:left;margin-left:15px;width:144px;margin-right:15px;"></label>
  17. <buttonstyle="padding:7px50px;">开始上传</button>
  18. </div>
  19. </div>
  20. <!--断点续传end-->


三、js代码

[javascript]view plaincopy
  1. <scripttype="text/javascript">
  2. jQuery(function(){
  3. /*******************初始化参数*********************************/
  4. var$list=$(‘#thelist‘),//文件列表
  5. $btn=$(‘#startOrStopBtn‘),//开始上传按钮
  6. state=‘pending‘,//初始按钮状态
  7. uploader;//uploader对象
  8. varfileMd5;//文件唯一标识
  10. /******************下面的参数是自定义的*************************/
  11. varfileName;//文件名称
  12. varoldJindu;//如果该文件之前上传过已经上传的进度是多少
  13. varcount=0;//当前正在上传的文件在数组中的下标，一次上传多个文件时使用
  14. varfilesArr=newArray();//文件数组：每当有文件被添加进队列的时候就push到数组中
  15. varmap={};//key存储文件id，value存储该文件上传过的进度
  17. /*****************************************************监听分块上传过程中的三个时间点start***********************************************************/
  18. WebUploader.Uploader.register({
  19. "before-send-file":"beforeSendFile",//整个文件上传前
  20. "before-send":"beforeSend",//每个分片上传前
  21. "after-send-file":"afterSendFile",//分片上传完毕
  22. },
  23. {
  24. //时间点1：所有分块进行上传之前调用此函数
  25. beforeSendFile:function(file){
  26. vardeferred=WebUploader.Deferred();
  27. //1、计算文件的唯一标记fileMd5，用于断点续传如果.md5File(file)方法里只写一个file参数则计算MD5值会很慢所以加了后面的参数：10*1024*1024
  28. (newWebUploader.Uploader()).md5File(file,0,10*1024*1024).progress(function(percentage){
  29. $(‘#‘+file.id).find(‘p.state‘).text(‘正在读取文件信息...‘);
  30. })
  31. .then(function(val){
  32. $(‘#‘+file.id).find("p.state").text("成功获取文件信息...");
  33. fileMd5=val;
  34. //获取文件信息后进入下一步
  35. deferred.resolve();
  36. });
  38. fileName=file.name;//为自定义参数文件名赋值
  39. returndeferred.promise();
  40. },
  41. //时间点2：如果有分块上传，则每个分块上传之前调用此函数
  42. beforeSend:function(block){
  43. vardeferred=WebUploader.Deferred();
  44. $.ajax({
  45. type:"POST",
  46. url:"${ctx}/testController/mergeOrCheckChunks.do?param=checkChunk",//ajax验证每一个分片
  47. data:{
  48. fileName:fileName,
  49. jindutiao:$("#jindutiao").val(),
  50. fileMd5:fileMd5,//文件唯一标记
  51. chunk:block.chunk,//当前分块下标
  52. chunkSize:block.end-block.start//当前分块大小
  53. },
  54. cache:false,
  55. async:false,//与js同步
  56. timeout:1000,//todo超时的话，只能认为该分片未上传过
  57. dataType:"json",
  58. success:function(response){
  59. if(response.ifExist){
  60. //分块存在，跳过
  61. deferred.reject();
  62. }else{
  63. //分块不存在或不完整，重新发送该分块内容
  64. deferred.resolve();
  65. }
  66. }
  67. });
  69. this.owner.options.formData.fileMd5=fileMd5;
  70. deferred.resolve();
  71. returndeferred.promise();
  72. },
  73. //时间点3：所有分块上传成功后调用此函数
  74. afterSendFile:function(){
  75. //如果分块上传成功，则通知后台合并分块
  76. $.ajax({
  77. type:"POST",
  78. url:"${ctx}/testController/mergeOrCheckChunks.do?param=mergeChunks",//ajax将所有片段合并成整体
  79. data:{
  80. fileName:fileName,
  81. fileMd5:fileMd5,
  82. },
  83. success:function(data){
  84. count++;//每上传完成一个文件count+1
  85. if(count<=filesArr.length-1){
  86. uploader.upload(filesArr[count].id);//上传文件列表中的下一个文件
  87. }
  88. //合并成功之后的操作
  89. }
  90. });
  91. }
  92. });
  93. /*****************************************************监听分块上传过程中的三个时间点end**************************************************************/
  95. /************************************************************初始化WebUploaderstart******************************************************************/
  96. uploader=WebUploader.create({
  97. auto:false,//选择文件后是否自动上传
  98. chunked:true,//开启分片上传
  99. chunkSize:10*1024*1024,//如果要分片，分多大一片？默认大小为5M
  100. chunkRetry:3,//如果某个分片由于网络问题出错，允许自动重传多少次
  101. threads:3,//上传并发数。允许同时最大上传进程数[默认值：3]
  102. duplicate:false,//是否重复上传（同时选择多个一样的文件），true可以重复上传
  103. prepareNextFile:true,//上传当前分片时预处理下一分片
  104. swf:‘${ctx}/resource/webuploader/Uploader.swf‘,//swf文件路径
  105. server:‘${ctx}/testController/fileSave.do‘,//文件接收服务端
  106. fileSizeLimit:6*1024*1024*1024,//6G验证文件总大小是否超出限制,超出则不允许加入队列
  107. fileSingleSizeLimit:3*1024*1024*1024,//3G验证单个文件大小是否超出限制,超出则不允许加入队列
  108. pick:{
  109. id:‘#picker‘,//这个id是你要点击上传文件按钮的外层div的id
  110. multiple:false//是否可以批量上传，true可以同时选择多个文件
  111. },
  112. resize:false,//不压缩image,默认如果是jpeg，文件上传前会先压缩再上传！
  113. accept:{
  114. //允许上传的文件后缀，不带点，多个用逗号分割
  115. extensions:"txt,jpg,jpeg,bmp,png,zip,rar,war,pdf,cebx,doc,docx,ppt,pptx,xls,xlsx",
  116. mimeTypes:‘.txt,.jpg,.jpeg,.bmp,.png,.zip,.rar,.war,.pdf,.cebx,.doc,.docx,.ppt,.pptx,.xls,.xlsx‘,
  117. }
  118. });
  119. /************************************************************初始化WebUploaderend********************************************************************/
  121. //当有文件被添加进队列的时候（点击上传文件按钮，弹出文件选择框，选择完文件点击确定后触发的事件）
  122. uploader.on(‘fileQueued‘,function(file){
  123. //限制单个文件的大小超出了提示
  124. if(file.size>3*1024*1024*1024){
  125. alert("单个文件大小不能超过3G");
  126. returnfalse;
  127. }
  129. /*************如果一次只能选择一个文件，再次选择替换前一个，就增加如下代码*******************************/
  130. //清空文件队列
  131. $list.html("");
  132. //清空文件数组
  133. filesArr=[];
  134. /*************如果一次只能选择一个文件，再次选择替换前一个，就增加以上代码*******************************/
  136. //将选择的文件添加进文件数组
  137. filesArr.push(file);
  139. $.ajax({
  140. type:"POST",
  141. url:"${ctx}/testController/selectProgressByFileName.do",//先检查该文件是否上传过，如果上传过，上传进度是多少
  142. data:{
  143. fileName:file.name//文件名
  144. },
  145. cache:false,
  146. async:false,//同步
  147. dataType:"json",
  148. success:function(data){
  149. //上传过
  150. if(data>0){
  151. //上传过的进度的百分比
  152. oldJindu=data/100;
  153. //如果上传过上传了多少
  154. varjindutiaoStyle="width:"+data+"%";
  155. $list.append(‘<div>‘+
  156. ‘<h4>‘+file.name+‘</h4>‘+
  157. ‘<p>已上传‘+data+‘%</p>‘+
  158. ‘<ahref="javascript:void(0);">删除</a>‘+
  159. ‘<div>‘+
  160. ‘<divrole="progressbar"style="‘+jindutiaoStyle+‘">‘+
  161. ‘</div>‘+
  162. ‘</div>‘+
  163. ‘</div>‘);
  164. //将上传过的进度存入map集合
  165. map[file.id]=oldJindu;
  166. }else{//没有上传过
  167. $list.append(‘<div>‘+
  168. ‘<h4>‘+file.name+‘</h4>‘+
  169. ‘<p>等待上传...</p>‘+
  170. ‘<ahref="javascript:void(0);">删除</a>‘+
  171. ‘</div>‘);
  172. }
  173. }
  174. });
  175. uploader.stop(true);
  176. //删除队列中的文件
  177. $(".btnRemoveFile").bind("click",function(){
  178. varfileItem=$(this).parent();
  179. uploader.removeFile($(fileItem).attr("id"),true);
  180. $(fileItem).fadeOut(function(){
  181. $(fileItem).remove();
  182. });
  184. //数组中的文件也要删除
  185. for(vari=0;i<filesArr.length;i++){
  186. if(filesArr[i].id==$(fileItem).attr("id")){
  187. filesArr.splice(i,1);//i是要删除的元素在数组中的下标，1代表从下标位置开始连续删除一个元素
  188. }
  189. }
  190. });
  191. });
  193. //文件上传过程中创建进度条实时显示
  194. uploader.on(‘uploadProgress‘,function(file,percentage){
  195. var$li=$(‘#‘+file.id),
  196. $percent=$li.find(‘.progress.progress-bar‘);
  197. //避免重复创建
  198. if(!$percent.length){
  199. $percent=$(‘<div>‘+
  200. ‘<divrole="progressbar"style="width:0%">‘+
  201. ‘</div>‘+
  202. ‘</div>‘).appendTo($li).find(‘.progress-bar‘);
  203. }
  205. //将实时进度存入隐藏域
  206. $("#jindutiao").val(Math.round(percentage*100));
  208. //根据fielId获得当前要上传的文件的进度
  209. varoldJinduValue=map[file.id];
  211. if(percentage<oldJinduValue&&oldJinduValue!=1){
  212. $li.find(‘p.state‘).text(‘上传中‘+Math.round(oldJinduValue*100)+‘%‘);
  213. $percent.css(‘width‘,oldJinduValue*100+‘%‘);
  214. }else{
  215. $li.find(‘p.state‘).text(‘上传中‘+Math.round(percentage*10

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved