Html5大檔案斷點續傳實作方法_html5教學技巧

大檔案分塊

一般常用的web伺服器都有對向伺服器端提交資料有大小限制。超過一定大小文件伺服器端將傳回拒絕訊息。當然，web伺服器都提供了設定檔可能修改限制的大小。針對iis實作大檔案的上傳網路上也有一些透過修改web伺服器限製檔案大小來實現。不過這樣對web伺服器的安全帶了問題。攻擊者很容易發一個大數據包，將你的web伺服器直接給拖死。
現在針對大檔案上傳主流的實作方式，透過將大檔案分塊。例如針對一個100M文件，依2M拆分為50塊。然後再將每個檔案依序上傳到伺服器上，上傳完成後再在伺服器上合併檔案。
在web實作大檔案上傳，核心主要實作檔案的分塊。在Html5 File API 出現以前，要想在web上實作檔案分塊傳輸。只有透過flash或Activex實現檔案的分塊。

在Html5 下，我們可以直接透過file的slice 方法來實現檔案的分塊。如：

XML/HTML Code複製內容到剪貼簿

1. file.slice(0,1000);    
2. file.slice(1000,2000);    
3. file.slice(2000,3000);  

然後再透過XMLHttpRequest異步上傳到伺服器。

Html5 上傳檔案類別庫

如果你有興趣及時間 ，當然可以自己用html5的File API來實現。本人在網路上查找到了以下兩個支援html5類庫。
resumable.js 附git上的網址：https://github.com/23/resumable.js
Pludload http://plupload.com/

resumable是一個純html5上傳類庫。
而Pludload是一個支援html5,flash,silverlight,html4,它會自動判斷瀏覽是否支援html5不支援將用其它的上傳方式。
我測試下來，resumable和Pludload都支援html5分塊上傳檔案。用下來覺得resumable比較適合，以下就選resumable來介紹。

resumable.js斷點上傳使用介紹

主要設定介紹：

JavaScript Code複製內容到剪貼簿

1. var r = new Resumable({    Resumable({   
2.             target:'/test/upload'
,   
3. ,   
            chunkSize:1*1024*1024,   
5.             simultaneousUploads:4,   
            testChunks: 
6. true
,   
7. ,   
            throttleProgressCallbacks:1,   
            method: 

"octet"

              });   chunkSize 分塊檔案大小，以位元組為單位
simultaneousUploads 同時上傳檔案區塊的進程數，可以同時允許多個檔案區塊上傳。
testChunks 上前檔案區塊是否先透過get方式傳送檔案資訊偵測檔案是否已上傳。

resumable斷點上傳是透過testChunks配置節點來實現，當設定為true時。 resumable會先發送一個get請求，如果http狀態回傳 200。則認為目前區塊已經上傳完成，然後進行下一塊的get請求。如果http狀態傳回的不是200，則會透過post方式傳送目前區塊資料包進行檔案區塊上傳。

設定testChunks為true每次上傳都會增加一個get請求，如果我們已經知道上次中斷上傳前檔案的區塊數。下次直接從中斷的區塊數上傳就行了。這樣可以為每個區塊減少一次http的get請求。
針對這個需求，我修改了resumable的源碼，為resumable裡的file物件增加了一個startchunkindex的屬性，預設為0。用於設定目前檔案從哪一個區塊開始上傳。這樣，我們只需要在在文件上傳前從伺服器上進行一次查詢(查詢當前文件上傳到哪一塊)，返回上次上傳的文件塊索引。再將索引值設定到file的startchunkindex屬性就可以實現從上次斷開的檔案區塊開始上傳。
呼叫方式：

JavaScript Code複製內容到剪貼簿

1. // Handle file add event   
2.               r.on('fileAdded'                   file.startchunkindex = 0; ////> 具體可以查看附件裡的demo。
3. 收尾工作 所有檔案區塊上傳完，最後工作就是合併儲存檔案。附件為resumable斷上傳.net實作的服務端例子，包括簡單的檔案合併功能。其它語言的demo大家也可以從resumable的git下載。 demo範例為了簡單，只是把檔案存放在本機。在真實的生產環境中。一般應該放在單獨的檔案伺服器上（前台web透過ftp或資料夾共用方式上傳到檔案伺服器），然後對上傳好的檔案進行分發鏡像或處理（例如視訊壓縮）。當然最好是存在分散式檔案系統中，目前看下來放到Hadoop分散式檔案系統(HDFS)是一個不錯的好方案。
demo

Vs2012 Html5 Upload demo下載