Blob

正在翻譯中。

Blob(Binary Large Object)物件代表了一個相當於檔案(原始資料)的不可變物件。Blob 中的資料並不一定是 JavaScript 原生的格式。File 介面基於 Blob,繼承 blob 並擴充其功能以支援操作使用者系統上的檔案。

從其它非 Blob 物件或資料來建構 Blob 物件,可以使用 Blob() 建構式。要建立一個包含目前 blob 內容子集的 blob,可使用 slice() 方法。若要自使用者系統上的檔案取得 Blob 物件,請參考 File 文件。

註:早期 slice() 方法擁有第二個參數 length 以指定在建立新 Blob 物件時要複製的位元組(byte)數量。假如指定的 start + length 超出了來源 Blob 的大小,則回傳的 Blob 會包含自索引 start 至結尾的完整來源內容。

註:需注意在部分瀏覽器版本中,slice() 方法帶有前綴:Firefox 12 與之前的版本為 blob.mozSlice(),Safari 中是 blob.webkitSlice()。舊的、無前綴字版本的 slice() 方法則有不同的語意(semantics),但這是已淘汰的方法。瀏覽器對 blob.mozSlice() 的支援已在 Firefox 30 時中止。

建構式

Blob(blobParts[, options])
回傳新建立的 Blob 物件,包含了建構式參數傳入之陣列所串聯後的值。第二個參數為 BlobPropertyBag 物件,其擁有 type 和 endings 屬性

屬性

Blob.isClosed Read only
布林值,用以表示此 blob 物件的 Blob.close() 方法是否曾被呼叫。已關閉的 blob 物件將不能被讀取。
Blob.size Read only
以 byte 為單位的 Blob 物件大小。
Blob.type Read only
Blob 物件中資料的型態,以 MIME 類型的字串表示。若型態為未知,則為空字串。

方法

Blob.close()
關閉 blob 物件,可能會釋放底層的資源。
Blob.slice([start[, end[, contentType]]])
回傳一個包含當前 Blob 物件之指定資料範圍(byte)內容的新 Blob 物件。

範例

Blob 建構函數用法範例

Blob() constructor 建構式允許由其它物件建立 blob 物件。以下的範例演示了以字串來建構 blob 物件:

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

在 Blob 建構式出現之前,可以透過 BlobBuilder 來建立 blob 物件(目前已不建議使用):

var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob('text/xml');

更多範例:

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob

等同於已過時的 BlobBuilder(不應再被使用):

var oBuilder = new BlobBuilder();
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob('text/xml'); // the blob

藉型別陣列建構的 blob 來建立 URL

範例程式碼:

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.

從 Blob 取出資料

從 Blob 讀取資料的唯一方式就是使用 FileReader。以下範例展示了讀取 Blob 內容作為型別陣列:

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);

藉由操作 FileReader 的其他方法,將 Blob 讀取成字串或是 data URL 是有可能的。

規範

規範 狀態 註解
File API
The definition of 'Blob' in that specification.
Working Draft Initial definition.

瀏覽器相容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 5[1] (Yes) 4[2] 10 11.10[1] 5.1[1]
slice() 10 webkit
21
(Yes) 5 moz[3]
13
10 12 5.1 webkit
Blob() constructor 20 (Yes) 13.0 (13.0) 10 12.10 6
close() and isClosed ? No support No support[4] ? ? ?
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) 13.0 (13.0) ? ? ?
slice() ? (Yes) ? ? ? ?
Blob() constructor ? (Yes) ? ? ? ?
close() and isClosed ? No support No support[4] ? ? ?

[1] A version of slice() taking the length as second argument was implemented in WebKit and Opera 11.10. However, since that syntax differed from Array.slice() and String.slice(), WebKit removed support and added support for the new syntax as Blob.webkitSlice().

[2] A version of slice() taking the length as second argument was implemented in Firefox 4. However, since that syntax differed from Array.slice() and String.slice(), Gecko removed support and added support for the new syntax as mozSlice().

[3] Prior to Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), there was a bug that affected the behavior of slice(); it did not work for start and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.

[4] See bug 1048325

Gecko notes: availability in privileged code

To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

Cu.importGlobalProperties(['Blob']);

Blob is available in Worker scopes.

參見

文件標籤與貢獻者

 此頁面的貢獻者: jackblackevo, changbenny, alk03073135
 最近更新: jackblackevo,