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

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

接受 Blob 物件的 API 可以在 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.size Read only
以 byte 為單位的 Blob 物件大小。
Blob.type Read only
Blob 物件中資料的型態,以 MIME 類型的字串表示。若型態為未知,則為空字串。

方法

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');

藉型別陣列建構的 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.

瀏覽器相容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support5 Yes410115.1
Blob() constructor20 ?13110128
size512410115.1
type512410115.1
slice

21

5 — 21 webkit

12

132

5 — 13 moz

10125.1 webkit
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes14 ? ? ?
Blob() constructor ? ? ?141 ? ? ?
size No No Yes No No No No
type No No Yes No No No No
slice ? ? Yes14 ? ? ?

1. Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.

2. Prior to Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), there was a bug that affected the behavior of Blob.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.

參見

文件標籤與貢獻者

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