Html5大文件斷點續傳實現方法
來源:易賢網 閱讀:1536 次 日期:2016-07-09 10:14:43
溫馨提示:易賢網小編為您整理了“Html5大文件斷點續傳實現方法”,方便廣大網友查閱!

這篇文章主要介紹了Html5大文件斷點續傳實現方法,需要的朋友可以參考下

大文件分塊 

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

現在針對大文件上傳主流的實現方式,通過將大文件分塊。比如針對一個100M文件,按2M拆分為50塊。然后再將每塊文件依次上傳到服務器上,上傳完成后再在服務器上合并文件。 

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

在Html5 下,我們可以直接通過file的slice 方法來實現文件的分塊。如: 

XML/HTML Code

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斷點上傳使用介紹 

主要配置介紹: 

JavaScript Code

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屬性就可以實現從上次斷開的文件塊開始上傳。 

調用方式: 

JavaScript Code

// Handle file add event   

              r.on('fileAdded', function (file) {   

                  file.startchunkindex = 0; // 設置當前文件開始上傳的塊數  

具體可以查看附件里的demo。 

收尾工作 

所有文件塊上傳完,最后工作就是合并保存文件。附件為resumable斷上傳.net實現的服務端例子,包括簡單的文件合并功能。其它語言的demo大家也可以從resumable的git上下載。 

demo例子為了簡單,只是把文件存放在本機。在真實的生產環境中。一般應該放在單獨的文件服務器上(前臺web通過ftp或文件夾共享方式上傳到文件服務器),然后對上傳好的文件進行分發鏡像或處理(比如視頻壓縮)。當然最好是存在分布式文件系統中,目前看下來放到Hadoop分布式文件系統(HDFS)是一個不錯的好方案。 

更多信息請查看網頁制作
易賢網手機網站地址:Html5大文件斷點續傳實現方法
由于各方面情況的不斷調整與變化,易賢網提供的所有考試信息和咨詢回復僅供參考,敬請考生以權威部門公布的正式信息和咨詢為準!

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
云南網警備案專用圖標
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網
云南網警報警專用圖標
未满十八18勿进黄网站免费看