單文件WebUploader作大文件的分塊和斷點續傳

時間  2019-11-18
標籤 文件 webuploader 作大 分塊 斷點 简体版
原文   原文鏈接

前言：

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5爲主，FLASH爲輔的現代文件上傳組件。在現代的瀏覽器裏面能充分發揮HTML5的優點，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS 6+, android 4+。兩套運行時，一樣的調用方式，可供用戶任意選用。javascript

 

上面的一段話是來自 http://fex.baidu.com/webuploader/  的介紹，如今作的項目須要用到大文件的上傳，以前沒有作過，現有的jquery的uploadify只用於上傳圖片什麼的小文件，查了網上的資料，這個插件好像對於大文件不是很友好，爲了安全起見，使用百度的成熟框架，不管是多文件仍是單個的大文件都是很好用的，沒有不少的問題，關於webuploader的詳細介紹看官網就行：css

 

個人項目是javaweb,開發環境是MyEclipse，頁面使用jsphtml

 

一、先將 webuploader-0.1.5.zip 這個文件下載下來：https://github.com/fex-team/webuploader/releases  

根據我的的需求放置本身須要的東西就行，所有放到項目裏也能夠，下面是我本身須要的東西：java

二、代碼部分：分爲jsp和servlet部分


一、jsp部分代碼：

 

[html]  view plain  copy
 
  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.                 //一、計算文件的惟一標記，用於斷點續傳  
  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>  

 

 

二、servlet部分代碼：


servlet部分須要兩個servlet，一個用於接收分塊文件，一個用於合併分塊成一個文件：jquery

一、接收分塊servlet代碼：

 

[java]  view plain  copy
 
  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. }  

 

 

二、合併分塊servlet代碼：

 

[java]  view plain  copy
 
  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文件根據本身的需求。android

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程