Blob

Blob 对象是包含有只读原始数据的类文件对象。Blob 对象中的数据并不一定得是JavaScript 中的原生形式。File 接口基于 Blob，继承了 Blob 的功能,并且扩展支持用户计算机上的本地文件。

创建 Blob 对象的方法有几种，可以调用 Blob() 构造函数，还可以使用一个已有 Blob 对象上的 slice() 方法切出另一个 Blob 对象。想要从用户的文件里获取一个 Blob 对象，请参考 File 文档。

File 文档同样列出了接受 Blob 对象的一些 API。

注：

slice() 一开始的时候是接受 length 作为第二个参数，以表示复制到新 Blob 对象的字节数。如果设置其为 start + length，超出了源 Blob 对象的大小，那返回的 Blob 则是整个源 Blob 的数据。

注：请注意，slice() 方法在某些浏览器和版本上仍带有供应商前缀：比如 Firefox 12及更早版本的blob.mozSlice() 和Safari中的blob.webkitSlice()。 slice() 方法的旧版本，没有供应商前缀，具有不同的语义，并且已过时。使用Firefox 30 删除了对 blob.mozSlice() 的支持。

构造函数

Blob(blobParts[, options]): 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

属性

Blob.isClosed 只读: 布尔值，指示 Blob.close() 是否在该对象上调用过。关闭的 blob 对象不可读。
Blob.size 只读: Blob 对象中所包含数据的大小（字节）。
Blob.type 只读: 一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。

方法

Blob.close(): 关闭 Blob 对象，以便能释放底层资源。
Blob.slice([start[, end[, contentType]]]): 返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。

示例

Blob 构造函数用法举例

Blob() 构造函数 允许用其它对象创建一个 Blob 对象。比如，用字符串构建一个 blob：

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

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();
// 传入一个合适的MIME类型
var blob = new Blob([typedArray], {type: "application/octet-binary"});

// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
// 你可以像使用一个普通URL那样使用它，比如用在img.src上。
var url = URL.createObjectURL(blob);

从 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 以外的方法读取到的内容可能会是字符串或是数据 URL。

规范

Specification	Status	Comment
File API Blob	Working Draft	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	5^[1]	4^[2]	10	11.10^[1]	5.1^[1]
`slice()`	10 webkit 21	5 moz^[3] 13	10	12	5.1 webkit
`Blob()` constructor	20	13.0 (13.0)	10	12.10	6
`close()` and `isClosed`	?	未实现^[4]	?	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	13.0 (13.0)	?	?	?
`slice()`	?	?	?	?	?
`Blob()` constructor	?	?	?	?	?
`close()` and `isClosed`	?	未实现^[4]	?	?	?

[1]WebKit 和 Opera 11.10 版本实现的 slice() 使用 length 来作为第二个参数。但是，因为这语法异于 Array.slice() 和 String.slice()，WebKit 已经将其移除，并添加了新的语法即 Blob.webkitSlice().

[2] Firefox 4 版本实现的 slice() 使用 length 来作为第二个参数。但是，因为这语法异于 Array.slice() 和 String.slice()，Gecko 已经将其移除，并添加了新的语法即 mozSlice()。

[3] 在Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 之前，slice() 方法有个bug，就是参数 start 和 end 的值不能超出64位无符号数字范围，现已修复。

[4] 请看 bug 1048325。

Gecko 备注：特权许可

要使用 chrome 代码，JSM 和 Bootstrap 作用域，你必须像这样导入它:

Cu.importGlobalProperties(['Blob']);

在 Worker 作用域内 Blob 可用。