Html5大文件斷點續傳

大文件分塊

通常經常使用的web服務器都有對向服務器端提交數據有大小限制。超過必定大小文件服務器端將返回拒絕信息。固然，web服務器都提供了配置文件可能修改限制的大小。針對iis實現大文件的上傳網上也有一些經過修改web服務器限制文件大小來實現。不過這樣對web服務器的安全帶了問題。攻擊者很容易發一個大數據包，將你的web服務器直接給拖死。

如今針對大文件上傳主流的實現方式，經過將大文件分塊。好比針對一個100M文件，按2M拆分爲50塊。而後再將每塊文件依次上傳到服務器上，上傳完成後再在服務器上合併文件。

在web實現大文件上傳，核心主要實現文件的分塊。在Html5 File API 出現之前，要想在web上實現文件分塊傳輸。只有經過flash或Activex實現文件的分塊。

在Html5 下，咱們能夠直接經過file的slice 方法來實現文件的分塊。如：

file.slice(0,1000); 
file.slice(1000,2000); 
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斷點上傳使用介紹

主要配置介紹：

        var r = new Resumable({
            target:'/test/upload',
            chunkSize:1*1024*1024,
            simultaneousUploads:4,
            testChunks: true,
            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屬性就能夠實現從上次斷開的文件塊開始上傳。
調用方式：

              // Handle file add event
              r.on('fileAdded', function (file) {
                  file.startchunkindex = 0; // 設置當前文件開始上傳的塊數

具體能夠查看附件裏的demo。　

收尾工做

全部文件塊上傳完，最後工做就是合併保存文件。附件爲resumable斷上傳.net實現的服務端例子，包括簡單的文件合併功能。其它語言的demo你們也能夠從resumable的git上下載。
demo例子爲了簡單，只是把文件存放在本機。在真實的生產環境中。通常應該放在單獨的文件服務器上（前臺web經過ftp或文件夾共享方式上傳到文件服務器），而後對上傳好的文件進行分發鏡像或處理（好比視頻壓縮）。固然最好是存在分佈式文件系統中，目前看下來放到Hadoop分佈式文件系統(HDFS)是一個不錯的好方案。

demo

 Vs2012 Html5 Upload demo下載