Html5大檔案斷點續傳

2021-09-07 05:49:22 字數 1673 閱讀 5278

大檔案分塊

一般常用的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 上傳檔案類庫

pludload

resumable是乙個純html5上傳類庫。

而pludload是乙個支援html5,flash,silverlight,html4,它會自動判斷瀏覽是否支援html5不支援將用其它的上傳方式。

我測試下來,resumable和pludload都支援html5分塊上傳檔案。用下來覺得resumable比較適合,以下就選resumable來進行介紹。

resumable.js斷點上傳使用介紹

主要配置介紹:

var r = new resumable();

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。 

收尾工作

系統中,目前看下來放到hadoop分布式檔案系統(hdfs)是乙個不錯的好方案。

html5解決大檔案斷點續傳

1.為什麼要採用分塊上傳?試想一下,如果上傳的檔案是乙個大檔案,本來上傳時間就相對較久,再加上網路不穩定各種因素影響,容易導致傳輸中斷,使用者除了重傳整個檔案外沒有更好的選擇。採用分片上傳可以很好地解決這個問題。2.什麼是分片上傳?分塊上傳,就是把乙個大的檔案分成若干塊,一塊一塊的傳輸。如上面的ca...

大檔案斷點續傳

win10 node v8.2.1 npm v5.3.0 multer v1.3.0 使用1.由於對multer v1.3.0做了修改,所以不可以通過npm install multer這種形式,需要使用到修改過multer包去覆蓋原來的。2.對於檔案上傳的介面,比如 upload,需要攜帶引數ta...

python實現大檔案切片斷點續傳

server 能夠處理前端請求的路由 pick 是觸發檔案上傳功能的前端元素id var task id webuploader.base.guid 產生檔案唯一識別符號task id var uploader webuploader.create 上傳分片位址 pick picker auto f...