HTML5實現文件斷點續傳

来源:http://www.cnblogs.com/zhangwc/archive/2017/01/04/6248516.html
-Advertisement-
Play Games

HTML5的FILE api,有一個slice方法,可以將BLOB對象進行分割。前端通過FileList對象獲取到相應的文件,按照指定的分割方式將大文件分段,然後一段一段地傳給後端,後端再按順序一段段將文件進行拼接。 斷點續傳原理 目前比較常用的斷點續傳的方法有兩種,一種是通過websocket介面 ...


HTML5的FILE api,有一個slice方法,可以將BLOB對象進行分割。前端通過FileList對象獲取到相應的文件,按照指定的分割方式將大文件分段,然後一段一段地傳給後端,後端再按順序一段段將文件進行拼接。

斷點續傳原理

目前比較常用的斷點續傳的方法有兩種,一種是通過websocket介面進行文件上傳,另一種是通過ajax,兩種方法各有千秋,雖然websocket聽起來比較高端些,但是除了用了不同的協議外其他的演算法基本上都是很相似的,並且服務端要開啟ws介面,這裡用相對方便的ajax來說明斷點上傳的思路。

說來說去,斷點續傳最核心的內容就是把文件“切片”然後再一片一片的傳給伺服器,但是這看似簡單的上傳過程卻有著無數的坑。

首先是文件的識別,一個文件被分成了若幹份之後如何告訴伺服器你切了多少塊,以及最終伺服器應該如何把你上傳上去的文件進行合併,這都是要考慮的。

因此在文件開始上傳之前,我們和伺服器要有一個“握手”的過程,告訴伺服器文件信息,然後和伺服器約定切片的大小,當和伺服器達成共識之後就可以開始後續的文件傳輸了。

前臺要把每一塊的文件傳給後臺,成功之後前端和後端都要標識一下,以便後續的斷點。

當文件傳輸中斷之後用戶再次選擇文件就可以通過標識來判斷文件是否已經上傳了一部分,如果是的話,那麼我們可以接著上次的進度繼續傳文件,以達到續傳的功能。

文件的前端切片

有了HTML5 的 File api之後切割文件比想象的要簡單的多。

只要用slice 方法就可以了

var packet = file.slice(start, end);

參數start是開始切片的位置,end是切片結束的位置 單位都是位元組。通過控制start和end 就可以是實現文件的分塊

如:

file.slice(0,1000); 
file.slice(1000,2000); 
file.slice(2000,3000); 
// ......

文件片段的上傳

上一部我們通過slice方法把文件分成了若幹塊,接下來要做的事情就是把這些碎片傳到伺服器上。

這裡我們用ajax的post請求來實現

var xhr = new XMLHttpRequest(); 
var url = xxx // 文件上傳的地址 可以包括文件的參數 如文件名稱 分塊數等以便後臺處理 
xhr.open('POST', url, true); 
xhr.onload = function (e)
     // 判斷文件是否上傳成功,如果成功繼續上傳下一塊,如果失敗重試該快 

xhr.upload.onprogress = function(e)
     // 選用 如果文件分塊大小較大 可以通過該方法判斷單片文件具體的上傳進度 
     // e.loaded  該片文件上傳了多少 
     // e.totalSize 該片文件的總共大小 

xhr.send(packet);

文件上傳到後臺後,後臺程式如PHP會做出相應的處理。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 切換數據存儲方式包括以下幾種: 將文本內容存儲在SqlServer、MySQL、MongoDB等資料庫中 將站點配置信息存儲在資料庫中 將後臺用戶信息存儲在資料庫中 將會員信息存儲在資料庫中 將圖片、視頻等媒體資源存儲在網站目錄以外的地方 切換內容資料庫 Kooboo CMS預設文本數據使用XML文 ...
  • 在開發應用的過程中,不可避免的會使用第三方類庫。之前用過一個WinRTXamlToolkit.UWP,現在微軟官方發佈了一個新的開源控制項庫—— UWPCommunityToolkit 項目代碼托管在Github上:https://github.com/Microsoft/UWPCommunityTo ...
  • 1,現象:網站應用程式池停止運行,系統日誌為: 1) 錯誤應用程式名稱: w3wp.exe,版本: 7.5.7601.17514,時間戳: 0x4ce7a5f8錯誤模塊名稱: unknown,版本: 0.0.0.0,時間戳: 0x00000000異常代碼: 0xc00000fd錯誤偏移量: 0x36 ...
  • 1. 查詢所有欄位 生成SQL語句為: 2. 指定欄位查詢 也可以是: 生成SQL語句為: 3. First和FirstOrDefault 生成SQL語句為: 4. Single和SingleOrDefault 生成的SQL語句為: 5.First,FirstOrDefault,Single,Sin ...
  • 1 using Newtonsoft.Json; 2 using System; 3 using System.Collections.Generic; 4 using System.IO; 5 using System.Linq; 6 using System.Text; 7 using Syst ...
  • 微信小程式也已出來有一段時間了,最近寫了幾款微信小程式項目,今天來說說感受。 首先開發一款微信小程式,最主要的就是針對於公司來運營的,因為,在申請appid(微信小程式ID號)時候,需要填寫相關的公司認證信息如,營業執照等 再次就是用一個未曾開通過公眾號的QQ號或微信號來註冊一個微信小程式號。 最後 ...
  • 0x00 前言 之前一直使用的是 EF ,做了一個簡單的小項目後發現 EF 的表現並不是很好,就比如聯表查詢,因為現在的 EF Core 也沒有啥好用的分析工具,所以也不知道該怎麼寫 Linq 生成出來的 Sql 效率比較高,於是這次的期末大作業決定使用性能強勁、輕便小巧的 ORM —— Dappe ...
  • 官網案例傳送門 我這裡不過是借花獻佛,案例官網就有. ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...