松鼠的博客

导航

单文件WebUploader做大文件的分块和断点续传

前言：

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

 

上面的一段话是来自 http://fex.baidu.com/webuploader/  的介绍，现在做的项目需要用到大文件的上传，之前没有做过，现有的jquery的uploadify只用于上传图片什么的小文件，查了网上的资料，这个插件好像对于大文件不是很友好，为了安全起见，使用百度的成熟框架，不论是多文件还是单个的大文件都是很好用的，没有很多的问题，关于webuploader的详细介绍看官网就行：

 

我的项目是javaweb,开发环境是MyEclipse，页面使用jsp

 

1、先将 webuploader-0.1.5.zip 这个文件下载下来：https://github.com/fex-team/webuploader/releases  

根据个人的需求放置自己需要的东西就行，全部放到项目里也可以，下面是我自己需要的东西：

2、代码部分：分为jsp和servlet部分


1、jsp部分代码：

 

  1. <script type="text/javascript">  
  2.         var fileMd5;  
  3.         //监听分块上传过程中的三个时间点  
  4.         WebUploader.Uploader.register({  
  5.             "before-send-file":"beforeSendFile",  
  6.             "before-send":"beforeSend",  
  7.             "after-send-file":"afterSendFile",  
  8.         },{  
  9.             //时间点1：所有分块进行上传之前调用此函数  
  10.             beforeSendFile:function(file){  
  11.                 var deferred = WebUploader.Deferred();  
  12.                 //1、计算文件的唯一标记，用于断点续传  
  13.                 (new WebUploader.Uploader()).md5File(file,0,10*1024*1024)  
  14.                     .progress(function(percentage){  
  15.                         $('#item1').find("p.state").text("正在读取文件信息...");  
  16.                     })  
  17.                     .then(function(val){  
  18.                         fileMd5=val;  
  19.                         $('#item1').find("p.state").text("成功获取文件信息...");  
  20.                         //获取文件信息后进入下一步  
  21.                         deferred.resolve();  
  22.                     });  
  23.                 return deferred.promise();  
  24.             },  
  25.             //时间点2：如果有分块上传，则每个分块上传之前调用此函数  
  26.             beforeSend:function(block){  
  27.                 var deferred = WebUploader.Deferred();  
  28.                   
  29.                 $.ajax({  
  30.                     type:"POST",  
  31.                     url:"<%=basePath%>Video?action=checkChunk",  
  32.                     data:{  
  33.                         //文件唯一标记  
  34.                         fileMd5:fileMd5,  
  35.                         //当前分块下标  
  36.                         chunk:block.chunk,  
  37.                         //当前分块大小  
  38.                         chunkSize:block.end-block.start  
  39.                     },  
  40.                     dataType:"json",  
  41.                     success:function(response){  
  42.                         if(response.ifExist){  
  43.                             //分块存在，跳过  
  44.                             deferred.reject();  
  45.                         }else{  
  46.                             //分块不存在或不完整，重新发送该分块内容  
  47.                             deferred.resolve();  
  48.                         }  
  49.                     }  
  50.                 });  
  51.                   
  52.                 this.owner.options.formData.fileMd5 = fileMd5;  
  53.                 deferred.resolve();  
  54.                 return deferred.promise();  
  55.             },  
  56.             //时间点3：所有分块上传成功后调用此函数  
  57.             afterSendFile:function(){  
  58.                 //如果分块上传成功，则通知后台合并分块  
  59.                 $.ajax({  
  60.                     type:"POST",  
  61.                     url:"<%=basePath%>Video?action=mergeChunks",  
  62.                     data:{  
  63.                         fileMd5:fileMd5,  
  64.                     },  
  65.                     success:function(response){  
  66.                         alert("上传成功");  
  67.                         var path = "uploads/"+fileMd5+".mp4";  
  68.                         $("#item1").attr("src",path);  
  69.                     }  
  70.                 });  
  71.             }  
  72.         });  
  73.           
  74.         var uploader = WebUploader.create({  
  75.             // swf文件路径  
  76.             swf: '<%=basePath%>scripts/webuploader-0.1.5/Uploader.swf',  
  77.             // 文件接收服务端。  
  78.             server: '<%=basePath%>UploadVideo',  
  79.             // 选择文件的按钮。可选。  
  80.             // 内部根据当前运行是创建，可能是input元素，也可能是flash.  
  81.             pick: {id: '#add_video',   <span style="background-color:rgb(255,204,0);">//这个id是你要点击上传文件的id，自己设置就好</span>  
  82.             multiple:false},  
  83.             // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！  
  84.             resize: true,  
  85.             auto:true,  
  86.             //开启分片上传  
  87.             chunked: true,  
  88.             chunkSize:10*1024*1024,  
  89.               
  90.             accept: {  
  91.             //限制上传文件为MP4  
  92.                 extensions: 'mp4',  
  93.                 mimeTypes: 'video/mp4',  
  94.             }  
  95.         });  
  96.                   
  97.         // 当有文件被添加进队列的时候  
  98.         uploader.on( 'fileQueued', function( file ) {  
  99.               
  100.             $('#item1').empty();  
  101.             $('#item1').html('<div id="' + file.id + '" class="item">'+  
  102.                 '<a class="upbtn" id="btn" onclick="stop()">[取消上传]</a>'+  
  103.                 '<p class="info">' + file.name + '</p>' +  
  104.                 '<p class="state">等待上传...</p></div>'  
  105.             );  
  106.         });  
  107.           
  108.         // 文件上传过程中创建进度条实时显示。  
  109.         uploader.on( 'uploadProgress', function( file, percentage ) {  
  110.             $('#item1').find('p.state').text('上传中 '+Math.round(percentage * 100) + '%');  
  111.         });  
  112.           
  113.         uploader.on( 'uploadSuccess', function( file ) {  
  114.             $( '#'+file.id ).find('p.state').text('已上传');  
  115.         });  
  116.           
  117.         uploader.on( 'uploadError', function( file ) {  
  118.             $( '#'+file.id ).find('p.state').text('上传出错');  
  119.         });  
  120.           
  121.         uploader.on( 'uploadComplete', function( file ) {  
  122.             $( '#'+file.id ).find('.progress').fadeOut();  
  123.         });  
  124.         
  125.         function start(){  
  126.             uploader.upload();  
  127.             $('#btn').attr("onclick","stop()");  
  128.             $('#btn').text("取消上传");  
  129.         }  
  130.           
  131.         function stop(){  
  132.             uploader.stop(true);  
  133.             $('#btn').attr("onclick","start()");  
  134.             $('#btn').text("继续上传");  
  135.         }  
  136.           
  137.     </script>  

 

 

2、servlet部分代码：


servlet部分需要两个servlet，一个用于接收分块文件，一个用于合并分块成一个文件：

1、接收分块servlet代码：

 

  1. @SuppressWarnings("serial")  
  2. public class UploadVideo extends HttpServlet {  
  3.     @Override  
  4.     protected void doGet(HttpServletRequest req, HttpServletResponse resp)  
  5.             throws ServletException, IOException {  
  6.         // TODO Auto-generated method stub  
  7.         super.doGet(req, resp);  
  8.         doPost(req, resp);  
  9.     }  
  10.     @SuppressWarnings("unchecked")  
  11.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  12.             throws ServletException, IOException {  
  13.           
  14.         DiskFileItemFactory factory = new DiskFileItemFactory();  
  15.         ServletFileUpload sfu = new ServletFileUpload(factory);  
  16.         sfu.setHeaderEncoding("utf-8");  
  17.           
  18.         String savePath = this.getServletConfig().getServletContext()  
  19.                 .getRealPath("");  
  20.         String folad = "uploads";  
  21.         savePath = savePath + "\\"+folad+"\\";  
  22.           
  23.         String fileMd5 = null;  
  24.         String chunk = null;  
  25.           
  26.         try {  
  27.             List<FileItem> items = sfu.parseRequest(request);  
  28.               
  29.             for(FileItem item:items){  
  30.                 if(item.isFormField()){  
  31.                     String fieldName = item.getFieldName();  
  32.                     if(fieldName.equals("fileMd5")){  
  33.                         fileMd5 = item.getString("utf-8");  
  34.                     }  
  35.                     if(fieldName.equals("chunk")){  
  36.                         chunk = item.getString("utf-8");  
  37.                     }  
  38.                 }else{  
  39.                     File file = new File(savePath+"/"+fileMd5);  
  40.                     if(!file.exists()){  
  41.                         file.mkdir();  
  42.                     }  
  43.                     File chunkFile = new File(savePath+"/"+fileMd5+"/"+chunk);  
  44.                     FileUtils.copyInputStreamToFile(item.getInputStream(), chunkFile);  
  45.                       
  46.                 }  
  47.             }  
  48.               
  49.         } catch (FileUploadException e) {  
  50.             // TODO Auto-generated catch block  
  51.             e.printStackTrace();  
  52.         }  
  53.           
  54.     }  
  55. }  

 

 

2、合并分块servlet代码：

 

  1. @SuppressWarnings("serial")  
  2. public class Video extends HttpServlet {  
  3.   
  4.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  5.             throws ServletException, IOException {  
  6.         super.doGet(request, response);  
  7.         doPost(request, response);  
  8.           
  9.     }  
  10.   
  11.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  12.             throws ServletException, IOException {  
  13.         String savePath = this.getServletConfig().getServletContext()  
  14.                 .getRealPath("");  
  15.         String folad = "uploads";  
  16.         savePath = savePath + "\\"+folad+"\\";  
  17.           
  18.         String action = request.getParameter("action");  
  19.           
  20.         if(action.equals("mergeChunks")){  
  21.             //合并文件  
  22.             //需要合并的文件的目录标记  
  23.             String fileMd5 = request.getParameter("fileMd5");  
  24.               
  25.             //读取目录里的所有文件  
  26.             File f = new File(savePath+"/"+fileMd5);  
  27.             File[] fileArray = f.listFiles(new FileFilter(){  
  28.                 //排除目录只要文件  
  29.                 @Override  
  30.                 public boolean accept(File pathname) {  
  31.                     // TODO Auto-generated method stub  
  32.                     if(pathname.isDirectory()){  
  33.                         return false;  
  34.                     }  
  35.                     return true;  
  36.                 }  
  37.             });  
  38.               
  39.             //转成集合，便于排序  
  40.             List<File> fileList = new ArrayList<File>(Arrays.asList(fileArray));  
  41.             Collections.sort(fileList,new Comparator<File>() {  
  42.                 @Override  
  43.                 public int compare(File o1, File o2) {  
  44.                     // TODO Auto-generated method stub  
  45.                     if(Integer.parseInt(o1.getName()) < Integer.parseInt(o2.getName())){  
  46.                         return -1;  
  47.                     }  
  48.                     return 1;  
  49.                 }  
  50.             });  
  51.             //UUID.randomUUID().toString()-->随机名  
  52.             File outputFile = new File(savePath+"/"+fileMd5+".mp4");  
  53.             //创建文件  
  54.             outputFile.createNewFile();  
  55.             //输出流  
  56.             FileChannel outChnnel = new FileOutputStream(outputFile).getChannel();  
  57.             //合并  
  58.             FileChannel inChannel;  
  59.             for(File file : fileList){  
  60.                 inChannel = new FileInputStream(file).getChannel();  
  61.                 inChannel.transferTo(0, inChannel.size(), outChnnel);  
  62.                 inChannel.close();  
  63.                 //删除分片  
  64.                 file.delete();  
  65.             }  
  66.             outChnnel.close();  
  67.             //清除文件夹  
  68.             File tempFile = new File(savePath+"/"+fileMd5);  
  69.             if(tempFile.isDirectory() && tempFile.exists()){  
  70.                 tempFile.delete();  
  71.             }  
  72.             System.out.println("合并成功");  
  73.         }else if(action.equals("checkChunk")){  
  74.             //检查当前分块是否上传成功  
  75.             String fileMd5 = request.getParameter("fileMd5");  
  76.             String chunk = request.getParameter("chunk");  
  77.             String chunkSize = request.getParameter("chunkSize");  
  78.               
  79.             File checkFile = new File(savePath+"/"+fileMd5+"/"+chunk);  
  80.               
  81.             response.setContentType("text/html;charset=utf-8");  
  82.             //检查文件是否存在，且大小是否一致  
  83.             if(checkFile.exists() && checkFile.length()==Integer.parseInt(chunkSize)){  
  84.                 //上传过  
  85.                 response.getWriter().write("{\"ifExist\":1}");  
  86.             }else{  
  87.                 //没有上传过  
  88.                 response.getWriter().write("{\"ifExist\":0}");  
  89.             }  
  90.         }  
  91.           
  92.     }  
  93.   
  94. }  

 

 

至此，大文件上传的分块和断点就ok了，这也只是我自己的项目需求编写的，这个框架还涵盖很多的内容和功能，需要你自己去研究了，不过都不是很难，你也可以去修改它的css和js文件根据自己的需求。

 

参考文章：http://blog.ncmem.com/wordpress/2023/11/17/%e5%8d%95%e6%96%87%e4%bb%b6webuploader%e5%81%9a%e5%a4%a7%e6%96%87%e4%bb%b6%e7%9a%84%e5%88%86%e5%9d%97%e5%92%8c%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/

欢迎入群一起讨论

 

 

posted on 2023-11-17 13:53  Xproer-松鼠  阅读(39)  评论(0)  编辑  收藏  举报