js中關于Blob對象的介紹與使用

blob對象介紹

一個 Blob對象表示一個不可變的, 原始數據的類似文件對象。Blob表示的數據不一定是一個JavaScript原生格式 blob對象本質上是js中的一個對象，里面可以儲存大量的二進制編碼格式的數據。

---

創建blob對象

創建blob對象本質上和創建一個其他對象的方式是一樣的，都是使用Blob() 的構造函數來進行創建。 構造函數接受兩個參數：

第一個參數為一個數據序列，可以是任意格式的值。

第二個參數是一個包含兩個屬性的對象{ type: MIME的類型, endings: 決定第一個參數的數據格式，可以取值為 "transparent" 或者 "native"（transparent的話不變，是默認值，native 的話按操作系統轉換） 。 }

Blob()構造函數允許使用其他對象創建一個Blob對象，比如用字符串構建一個blob

var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'});

既然是對象，那么blob也擁有自己的屬性以及方法

屬性

• Blob.isClosed (只讀)

  布爾值，指示 Blob.close() 是否在該對象上調用過。 關閉的 blob 對象不可讀。

• Blob.size (只讀)

  Blob 對象中所包含數據的大小（字節）。

• Blob.type (只讀)

  一個字符串，表明該Blob對象所包含數據的MIME類型。如果類型未知，則該值為空字符串。

方法

• Blob.close()

  關閉 Blob 對象，以便能釋放底層資源。

• Blob.slice([start[, end[, contentType]]])

  返回一個新的 Blob 對象，包含了源 Blob 對象中指定范圍內的數據。其實就是對這個blob中的數據進行切割，我們在對文件進行分片上傳的時候需要使用到這個方法。

看到上面這些方法和屬性，使用過HTML5提供的File接口的應該都很熟悉，這些屬性和方法在File接口中也都有。 其實File接口就是基于Blob，繼承blob功能并將其擴展為支持用戶系統上的文件，也就是說：

File接口中的Flie對象就是繼承與Blob對象。

blob對象的使用

上面說了很多關于Blob對象的一些概念性的東西，下面我們來看看實際用途。

---

分片上傳

首先說說分片上傳，我們在進行文件上傳的時候，因為服務器的限制，會限制每一次上傳到服務器的文件大小不會很大，這個時候我們就需要把一個需要上傳的文件進行切割，然后分別進行上傳到服務器。

假如需要做到這一步，我們需要解決兩個問題:

• 怎么切割?
• 怎么得知當前傳輸的進度?

首先怎么切割的問題上面已經有過說明，因為File文件對象是繼承與Blob對象的，因此File文件對象也擁有slice這個方法，我們可以使用這個方法將任何一個File文件進行切割。

代碼如下：

var BYTES_PER_CHUNK = 1024 * 1024; // 每個文件切片大小定為1MB . var blob = document.getElementById("file").files[0]; var slices = Math.ceil(blob.size / BYTES_PER_CHUNK); var blobs = []; slices.forEach(function(item, index) {blobs.push(blob.slice(index,index + 1)); });

通過上面的方法。我們就得到了一個切割之后的File對象組成的數組blobs；

接下來要做的時候就是講這些文件分別上傳到服務器。

在HTTP1.1以上的協議中，有Transfer-Encoding這個編碼協議，用以和服務器通信，來得知當前分片傳遞的文件進程。

這樣解決了這兩個問題，我們不僅可以對文件進行分片上傳，并且能夠得到文件上傳的進度。

粘貼圖片

blob還有一個應用場景，就是獲取剪切板上的數據來進行粘貼的操作。例如通過QQ截圖后，需要在網頁上進行粘貼操作。

粘貼圖片我們需要解決下面幾個問題

監聽用戶的粘貼操作

獲取到剪切板上的數據

將獲取到的數據渲染到網頁中

首先我們可以通過paste事件來監聽用戶的粘貼操作:

document.addEventListener('paste', function (e) {console.info(e); });

然后通過事件對象中的clipboardData?對象來獲取圖片的文件數據。

clipboardData對象介紹

介紹一下 clipboardData 對象，它實際上是一個 DataTransfer 類型的對象， DataTransfer 是拖動產生的一個對象，但實際上粘貼事件也是它。

clipboardData 的屬性介紹

屬性類型說明

dropEffect	String	默認是 none
effectAllowed	String	默認是 uninitialized
files	FileList	粘貼操作為空List
items	DataTransferItemList	剪切板中的各項數據
types	Array	剪切板中的數據類型 該屬性在Safari下比較混亂

items 介紹

items 是一個 DataTransferItemList 對象，自然里面都是 DataTransferItem 類型的數據了。

屬性

items 的 DataTransferItem 有兩個屬性 kind 和 type

屬性說明

kind	一般為 string 或者 file
type	具體的數據類型，例如具體是哪種類型字符串或者哪種類型的文件，即 MIME-Type

方法

方法參數說明

getAsFile	空	如果 kind 是 file ，可以用該方法獲取到文件
getAsString	function(str)	如果 kind 是 string ，可以用該方法獲取到字符串str

在原型上還有一些其他方法，不過在處理剪切板操作的時候一般用不到了。

type 介紹

一般 types 中常見的值有 text/plain 、 text/html 、 Files 。

值說明

text/plain	普通字符串
text/html	帶有樣式的html
Files	文件(例如剪切板中的數據)

有了上面這些方法，我們可以解決第二個問題即獲取到剪切板上的數據。

document.addEventListener('paste', function (e) {console.info(e);var cbd = e.clipboardData;for(var i = 0; i < cbd.items.length; i++) {var item = cbd.items[i];console.info(item);if(item.kind == "file"){var blob = item.getAsFile();if (blob.size === 0) {return;}console.info(blob);}} });

最后我們需要將獲取到的數據渲染到網頁上。

其實這個本質上就是一個類似于上傳圖片本地瀏覽的問題。我們可以直接通過HTML5的File接口將獲取到的文件上傳到服務器然后通過講服務器返回的url地址來對圖片進行渲染。也可以使用fileRender對象來進行圖片本地瀏覽。

fileRender對象簡介

從Blob中讀取內容的唯一方法是使用 FileReader。

FileReader接口有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法并不會返回讀取結果，這一結果存儲在result屬性中。

方法名參數描述

readAsBinaryString	file	將文件讀取為二進制編碼
readAsText	file,[encoding]	將文件讀取為文本
readAsDataURL	file	將文件讀取為DataURL
abort	(none)	終端讀取操作

FileReader接口包含了一套完整的事件模型，用于捕獲讀取文件時的狀態。

事件描述

onabort	中斷
onerror	出錯
onloadstart	開始
onprogress	正在讀取
onload	成功讀取
onloadend	讀取完成，無論成功失敗

通過上面的方法以及事件，我們可以發現，通過readAsDataURL方法及onload事件就可以拿到一個可本地瀏覽圖片的DataURL。

最終代碼如下：

document.addEventListener('paste', function (e) {console.info(e);var cbd = e.clipboardData;var fr = new FileReader();var html = '';for(var i = 0; i < cbd.items.length; i++) {var item = cbd.items[i];console.info(item);if(item.kind == "file"){var blob = item.getAsFile();if (blob.size === 0) {return;}console.info(blob);fr.readAsDataURL(blob);fr.on<x>load=function(e){var result=document.getElementById("result");//顯示文件result.innerHTML='<img src="' + this.result +'" alt="" />';}}} });

這樣我們就可以監聽到用戶的粘貼操作，并且將用戶粘貼的圖片文件實時的渲染到網頁之中了。

總結

以上是我對Blob對象的一些學習分享，希望在實際應用上能對大家有所幫助。

總結

以上是生活随笔為你收集整理的js中关于Blob对象的介绍与使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。