Html5大文件斷點續(xù)傳實現(xiàn)方法

2020-03-24 18:04:33

字體：大中小

供稿：網(wǎng)友

大文件分塊

一般常用的web服務(wù)器都有對向服務(wù)器端提交數(shù)據(jù)有大小限制。超過一定大小文件服務(wù)器端將返回拒絕信息。當(dāng)然，web服務(wù)器都提供了配置文件可能修改限制的大小。針對iis實現(xiàn)大文件的上傳網(wǎng)上也有一些通過修改web服務(wù)器限制文件大小來實現(xiàn)。不過這樣對web服務(wù)器的安全帶了問題。攻擊者很容易發(fā)一個大數(shù)據(jù)包，將你的web服務(wù)器直接給拖死。
現(xiàn)在針對大文件上傳主流的實現(xiàn)方式，通過將大文件分塊。比如針對一個100M文件，按2M拆分為50塊。然后再將每塊文件依次上傳到服務(wù)器上，上傳完成后再在服務(wù)器上合并文件。
在web實現(xiàn)大文件上傳，核心主要實現(xiàn)文件的分塊。在Html5 File API 出現(xiàn)以前，要想在web上實現(xiàn)文件分塊傳輸。只有通過flash或Activex實現(xiàn)文件的分塊。

在Html5 下，我們可以直接通過file的slice 方法來實現(xiàn)文件的分塊。如：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
然后再通過XMLHttpRequest異步上傳到服務(wù)器。

Html5 上傳文件類庫

如果你有興趣及時間，當(dāng)然可以自己用html5的File API來實現(xiàn)。本人在網(wǎng)上查找到了以下兩個支持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復(fù)制內(nèi)容到剪貼板
varr=newResumable({ target:'/test/upload', chunkSize:1*1024*1024, simultaneousUploads:4, testChunks:true, throttleProgressCallbacks:1, method: octet });
chunkSize 分塊文件大小，以字節(jié)為單位
simultaneousUploads 同時上傳文件塊的進程數(shù)，可以同時允許多個文件塊上傳。
testChunks 上前文件塊是否先通過get方式發(fā)送文件信息檢測文件是否已經(jīng)上傳。

resumable斷點上傳是通過testChunks配置節(jié)點來實現(xiàn)，當(dāng)設(shè)置為true時。resumable會先發(fā)送一個get請求，如果http狀態(tài)返回 200。則認(rèn)為當(dāng)前塊已經(jīng)上傳完成，然后進行下一塊的get請求。如果http狀態(tài)返回的不是200，則將通過post方式發(fā)送當(dāng)前塊數(shù)據(jù)包進行文件塊上傳。

設(shè)置testChunks為true每次上傳都會增加一個get請求，如果我們已經(jīng)知道上次中斷上傳前文件的塊數(shù)。下次直接從中斷的塊數(shù)上傳就行了。這樣可以為每個塊減少一次http的get請求。
針對這個需求，我修改了resumable的源碼，為resumable里的file對象增加了一個startchunkindex的屬性，默認(rèn)為0。用于設(shè)置當(dāng)前文件從哪一個塊開始上傳。這樣，我們只需要在在文件上傳前從服務(wù)器上進行一次查詢(查詢當(dāng)前文件上傳到哪一塊)，返回上次上傳的文件塊索引。再將索引值設(shè)置到file的startchunkindex屬性就可以實現(xiàn)從上次斷開的文件塊開始上傳。
調(diào)用方式：

JavaScript Code復(fù)制內(nèi)容到剪貼板
//Handlefileaddevent r.on('fileAdded',function(file){ file.startchunkindex=0;//設(shè)置當(dāng)前文件開始上傳的塊數(shù)
具體可以查看附件里的demo。

收尾工作

所有文件塊上傳完，最后工作就是合并保存文件。附件為resumable斷上傳.net實現(xiàn)的服務(wù)端例子，包括簡單的文件合并功能。其它語言的demo大家也可以從resumable的git上下載。
demo例子為了簡單，只是把文件存放在本機。在真實的生產(chǎn)環(huán)境中。一般應(yīng)該放在單獨的文件服務(wù)器上（前臺web通過ftp或文件夾共享方式上傳到文件服務(wù)器），然后對上傳好的文件進行分發(fā)鏡像或處理（比如視頻壓縮）。當(dāng)然最好是存在分布式文件系統(tǒng)中，目前看下來放到Hadoop分布式文件系統(tǒng)(HDFS)是一個不錯的好方案。

demo

Vs2012 Html5 Upload demo下載
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：html基礎(chǔ)教程之與瀏覽者交互，表單標(biāo)簽

下一篇：HTML中編碼規(guī)范的總結(jié)