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.

瀏覽器相容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 5Edge Full support YesFirefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 14Opera Android ? Safari iOS ? Samsung Internet Android ?
Blob() constructor
Experimental
Chrome Full support 20Edge ? Firefox Full support 13
Notes
Full support 13
Notes
Notes Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
IE Full support 10Opera Full support 12Safari Full support 8WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 14
Notes
Full support 14
Notes
Notes Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
Opera Android ? Safari iOS ? Samsung Internet Android ?
sizeChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
typeChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 11Safari Full support 5.1WebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
sliceChrome Full support 21
Full support 21
No support 5 — 21
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Full support 12Firefox Full support 13
Notes
Full support 13
Notes
Notes 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.
No support 5 — 13
Prefixed
Prefixed Requires the vendor prefix: moz
IE Full support 10Opera Full support 12Safari Full support 5.1
Prefixed
Full support 5.1
Prefixed
Prefixed Requires the vendor prefix: webkit
WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 14Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

參見

文件標籤與貢獻者

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