Blob(binary large object)是計算機界通用術語之一,表示二進制大對象。在JavaScript中,Blob通常表示二進制數據,不過,它們不一定非得是大量數據,Blob也可以表示一個小型文本文件的內容。
構造函數
new Blob(array[, options])
Blob()構造函數返回一個新的Blob對象,接收一個數組和配置項作為參數
參數array是一個由ArrayBuffer、ArrayBufferView、Blob、DOMString等對象構成的數組,或者其他類似對象的混合體,它將會被放進Blob
參數options是一個可選項,它可能會指定以下兩種屬性:
type: 表示被放入到blob中的數組內容的MIME類型,默認值為""
endings: 表示包含結束符`\n`的字符串如何被輸出。它是以下兩個值中的一個:"native",代表行結束符會被更改為適合宿主操作系統文件系統的慣例;"transparent",代表會保持blob中保存的結束符不變。默認值為"transparent"
<a href="#" id="link">hello world</a>
<script>
var b = new Blob([link], {
type: 'text/html'
})
console.log(b)
</script>
屬性
Blob.size(只讀):返回Blob對象中所包含數據的大小(字節)
Blob.type(只讀):一個字符串,表明該Blob對象所包含數據的MIME類型。如果類型未知,則該值為空字符串
<a href="#" id="link">hello world</a>
<script>
var b = new Blob([link], {
type: 'text/html'
})
console.log(b.size, b.type) // 23 "text/html"
</script>
方法
Blob.slice([start[, end[, contentType]]])
slice()方法返回一個新的Blob對象,包含了源Blob對象中指定范圍內的數據
var b = blob.slice(0,1024, "text/plain"); // Blob中前1KB的文本
Web瀏覽器可以將Blob存儲到內存中或者磁盤上,Blob可以表示非常大的數據塊(比如視頻文件),如果事先不用slice()方法將它們分割成為小數據塊的話,無法存儲在主內存中。正是因為Blob可以表示非常大的數據塊,並且它可能需要磁盤的訪問權限,所以使用它們的API是異步的(在Worker線程中有提供相應的同步版本)
文件作為Blob
在支持本地文件訪問的瀏覽器中,<input type="file">
元素上的files屬性則是一個FileList對象,該對象是一個類數組對象,其元素要么是0,要么是用戶選擇的多個File對象,一個File對象就是一個Blob
<input type="file" id="upload" multiple>
<script>
upload.onchange = function(e) {
var files = e.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
console.log(file);
}
}
</script>
Blob URL
創建Blob后接着就是操作Blob對象,最簡單的操作方法是創建一個URL來指向新創建的Blob,然后就可以以一般的URL形式在任何地方使用該URL,比如在DOM中、樣式表中、甚至可以作為XMLHttpRequest的目標
URL.createObjectURL()
使用URL.createObjectURL(blob)函數可以創建一個Blob URL,這個URL表示參數中的對象。Blob URL並不是永久有效的,它的生命周期和創建它的窗口中的document綁定,也就是說,一旦用戶關閉了或者離開了包含創建Blob URL腳本的文 檔,該Blob URL就失效了。
<input type="file" id="upload" multiple>
<script>
upload.onchange = function(e) {
var files = e.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
console.log(URL.createObjectURL(file));
}
}
如圖所示,傳遞一個Blob給URL.createObjectURL()方法會返回一個URL(以普通字符串形式)。該URL以blob://開始,緊跟着是一小串文本字符串,該字符串用不透明的唯一標識符來標識Blob
URL.revokeObjectURL()
URL.revokeObjectURL()靜態方法用來釋放之前通過調用URL.createObjectURL() 創建的已經存在的URL對象。
通常,當結束使用某個Blob URL對象時,應該通過調用這個方法來讓瀏覽器知道不再需要保持這個文件的引用了,這樣可以釋放該URL所占用的內存。如果不手動調用該方法,瀏覽器是不會回收該URL占用的內存的
URL.revokeObjectURL(objectURL);