2. 程式人生 > >單文件WebUploader做大文件的分塊和斷點續傳

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

阿新 • • 發佈：2018-01-11
serial multiple 添加 ngs size center watermark 前言 load()

前言：

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部分代碼：

[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. //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();
  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. });
  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. });
  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,
  90. accept: {
  91. //限制上傳文件為MP4
  92. extensions: ‘mp4‘,
  93. mimeTypes: ‘video/mp4‘,
  94. }
  95. });
  97. // 當有文件被添加進隊列的時候
  98. uploader.on( ‘fileQueued‘, function( file ) {
  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. });
  108. // 文件上傳過程中創建進度條實時顯示。
  109. uploader.on( ‘uploadProgress‘, function( file, percentage ) {
  110. $(‘#item1‘).find(‘p.state‘).text(‘上傳中 ‘+Math.round(percentage * 100) + ‘%‘);
  111. });
  113. uploader.on( ‘uploadSuccess‘, function( file ) {
  114. $( ‘#‘+file.id ).find(‘p.state‘).text(‘已上傳‘);
  115. });
  117. uploader.on( ‘uploadError‘, function( file ) {
  118. $( ‘#‘+file.id ).find(‘p.state‘).text(‘上傳出錯‘);
  119. });
  121. uploader.on( ‘uploadComplete‘, function( file ) {
  122. $( ‘#‘+file.id ).find(‘.progress‘).fadeOut();
  123. });
  125. function start(){
  126. uploader.upload();
  127. $(‘#btn‘).attr("onclick","stop()");
  128. $(‘#btn‘).text("取消上傳");
  129. }
  131. function stop(){
  132. uploader.stop(true);
  133. $(‘#btn‘).attr("onclick","start()");
  134. $(‘#btn‘).text("繼續上傳");
  135. }
  137. </script>

2、servlet部分代碼：


servlet部分需要兩個servlet，一個用於接收分塊文件，一個用於合並分塊成一個文件：

1、接收分塊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 {
  14. DiskFileItemFactory factory = new DiskFileItemFactory();
  15. ServletFileUpload sfu = new ServletFileUpload(factory);
  16. sfu.setHeaderEncoding("utf-8");
  18. String savePath = this.getServletConfig().getServletContext()
  19. .getRealPath("");
  20. String folad = "uploads";
  21. savePath = savePath + "\\"+folad+"\\";
  23. String fileMd5 = null;
  24. String chunk = null;
  26. try {
  27. List<FileItem> items = sfu.parseRequest(request);
  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);
  46. }
  47. }
  49. } catch (FileUploadException e) {
  50. // TODO Auto-generated catch block
  51. e.printStackTrace();
  52. }
  54. }
  55. }

2、合並分塊servlet代碼：

[java] view plain copy
  1. @SuppressWarnings("serial")
  2. public class Video extends HttpServlet {
  4. public void doGet(HttpServletRequest request, HttpServletResponse response)
  5. throws ServletException, IOException {
  6. super.doGet(request, response);
  7. doPost(request, response);
  9. }
  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+"\\";
  18. String action = request.getParameter("action");
  20. if(action.equals("mergeChunks")){
  21. //合並文件
  22. //需要合並的文件的目錄標記
  23. String fileMd5 = request.getParameter("fileMd5");
  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. });
  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");
  79. File checkFile = new File(savePath+"/"+fileMd5+"/"+chunk);
  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. }
  92. }
  94. }

至此，大文件上傳的分塊和斷點就ok了，這也只是我自己的項目需求編寫的，這個框架還涵蓋很多的內容和功能，需要你自己去研究了，不過都不是很難，你也可以去修改它的css和js文件根據自己的需求。

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

相關推薦

java使用WebUploader做大檔案的分塊和斷點續傳

前言： WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代檔案上傳元件。在現代的瀏覽器裡面能充分發揮html5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH執行時，相容IE6+，iOS 6+, 

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

serial multiple 添加 ngs size center watermark 前言 load() 前言： WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器裏面能充分發

iOS大檔案分片上傳和斷點續傳

總結一下大檔案分片上傳和斷點續傳的問題。因為檔案過大（比如1G以上），必須要考慮上傳過程網路中斷的情況。http的網路請求中本身就已經具備了分片上傳功能，當傳輸的檔案比較大時，http協議自動會將檔案切片（分塊），但這不是我們現在說的重點，我們要做的事是保證在網路中斷後1G

Android 多線程斷點續傳同時下載多個大文件

總結 orm acc ast mil view inpu lib 設置 最近學習在Android環境中一些網絡請求方面的知識，其中有一部分是關於網絡下載方面的知識。在這裏解析一下自己寫的demo，總結一下自己所學的知識。下圖為demo的效果圖，仿照一些應用下載商城在List

PHP如何異步福彩3D平臺出租斷點續傳大文件

狀態 啟動 理發 題解 都是 下一步 我們 .com www. 福彩3D平臺出租 haozbbs.com Q1446595067最近業務中碰到一個問題，就是需要用PHP去上傳一個大文件，大小差不多一個G，這可就為難我了，因為大文件上傳一直是個老大難的問題，不過最近騷操作

支持斷點續傳的大文件傳輸協議

領域 意義 技術分享 高性能 bee ces 操作系統 方式 linux 文件傳輸協議（FTP）是一個被廣泛應用的網絡協議，FTP技術作為文件傳輸的重要手段，在數據通信領域一直發揮著舉足輕重的作用，不支持斷點續傳，是Internet上最早也是最廣泛使用的應用之一. 從19

文件處理：大文件切片+文件讀寫鎖FileShare

readwrite 平時 寫入 所有 大小 con string 打開文件 () 大文件切分： 在項目開發中，我們會遇到單個文件大小超過1TB的文件，這樣的文件只能進行單文件讀取，往往會造成讀取完成耗時過長，導致客戶在使用體驗過程中不滿意。 為了解決提升大文件的解析速度

[轉] 前端實現文件的斷點續傳

刪除 targe for 以及 use eth 一段 手動 知識 早就聽說過斷點續傳這種東西，前端也可以實現一下 斷點續傳在前端的實現主要依賴著HTML5的新特性，所以一般來說在老舊瀏覽器上支持度是不高的 本文通過斷點續傳的簡單例子（前端文件提交+後端PHP文件

【轉】文件下載之斷點續傳（客戶端與服務端的實現）

http協議 當前時間 end box [] ada demo 服務端 sem 【轉】文件下載之斷點續傳（客戶端與服務端的實現） 【轉】文件下載之斷點續傳（客戶端與服務端的實現） 前面講了文件的上傳，今天來聊聊文件的下載。 老規矩，還是從最簡單粗暴的開始。那麽多簡單算簡單

網絡基礎、ftp任務（進度條、計算文件大小、斷點續傳、搭建框架示例）

... 請求 pro dal hashlib one win lap ase 一、網絡基礎 1、端口，是什麽？為什麽要有端口？ 　　端口是為了將同一個電腦上的不同程序進行隔離。 　　IP是找電腦；端口是找電腦上的應用程序； 　　端口範圍：1 – 6553

WebUploader 實現大檔案的斷點續傳功能

       斷點續傳指的是在下載或上傳時，將下載或上傳任務（一個檔案或一個壓縮包）人為的劃分為幾個部分，每一個部分採用一個片段進行上傳或下載，如果碰到網路故障，可以從已經上傳或下載的部分開始繼續上傳下載未完成的部分，而沒有必要從頭開始上傳下載。使用者可以節省

springboot 整合 gridfs 、webUploader實現大檔案分塊上傳、斷點續傳、秒傳

主要的pom.xml： <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId>

webUploader大檔案斷點續傳學習心得

一、準備材料：Uploader.swf、webuploader.css、webuploader.js，其中Uploader.swf只在初始化webUploader時用到，其餘兩個檔案在頁面引用即可。下載地址：https://github.com/fex-team/webup

百度webuploader如何實現秒傳與斷點續傳

因為這是小眾需求，所以預設沒有做在webuploader裡面，而只是提供hook介面，讓使用者很簡單的擴充套件此功能。 那麼，都有哪些重要的hook介面呢？ before-send-file 此hook在檔案傳送之前執行 before-file 此hook在檔案分片（如果沒有

大檔案分塊上傳第二彈(秒傳、斷點續傳)

關鍵部分 前端用file.slice()分塊 前端用FileReader獲取每一分塊的md5值 後端用MultipartFile接受分塊檔案 後端用FileOutputStream拼裝分塊檔案 話不多說，直接上程式碼，我想這是你們最喜歡的 html &l

網頁內實現大檔案分片上傳、斷點續傳

最近做公司的專案，需要在後臺控制系統中新增一個功能-------向伺服器傳送程式更新包；這些程式更新包大小不固定，但基本都在1G到4G之間，剛開始還真是難倒我了，因為之前的專案中沒有上傳過這麼大的檔案，還要斷點續傳，後來經過查資料，寫DEMO，這個問題終於解決了； 解決辦法： 使用XMLHt

大檔案的分塊與合併

import org.junit.Test;import java.io.File;import java.io.IOException;import java.io.RandomAccessFile;import java.util.Arrays;import java.util.Collections;i

php結合webuploader斷點續傳的實現

最近公司專案需要用到斷點續傳,所以記錄一下其中的坑 使用到的主要技術 webuploader thinkphp5 斷點續傳的思路: 客戶端: 1.獲取檔案md5(MD5是檔案唯一標識,用來判斷是否存在此檔案,並且用作分片的資料夾名)

Retrofit下載大檔案、監聽進度、斷點續傳

前些天有個同學問我會不會使用Retrofit下載大檔案，我就給了他我專案中使用的方法。發現有很多人還不會用Retrofit實現下載檔案，即使會下載，也可能會出現問題，比如：不知道如何獲取進度；一旦下載大檔案就會OOM；不知道如何暫停下載，或者不知道如何實現斷點續傳等。今天這個

阿里雲OSS單檔案斷點續傳+前端 簡單展示（springmvc架構）

業務沒有需要多檔案一起上傳，所以這裡只是單檔案，多檔案的話也是在獲得File的地方變成List即可，多個迴圈，多一些執行緒，網上有程式碼 一、pom.xml <dependencys> <dependenc