Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

要从其他非blob对象和数据构造一个Blob,请使用 Blob() 构造函数。要创建包含另一个blob数据的子集blob,请使用 slice()方法。要获取用户文件系统上的文件对应的Blob对象,请参阅 File文档。

接受Blob对象的API也被列在 File 文档中。

注意:slice()方法原本接受length作为第二个参数,以表示复制到新Blob 对象的字节数。如果设置的参数使start + length超出了源Blob对象的大小,那返回的则是从start到结尾的数据。
注意:slice() 方法在某些浏览器和版本上带有浏览器引擎前缀:比如 Firefox 12及更早版本的blob.mozSlice() 和Safari中的blob.webkitSlice()。 没有浏览器引擎前缀的老版本slice()方法有不同的语义,并且已过时。 Firefox 30 中取消了对blob.mozSlice()的支持。

构造函数

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

属性

Blob.size 只读
Blob 对象中所包含数据的大小(字节)。
Blob.type 只读
一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。

方法

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();
var blob = new Blob([typedArray], {type: "application/octet-binary"});// 传入一个合适的MIME类型
var url = URL.createObjectURL(blob);
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
// 你可以像使用一个普通URL那样使用它,比如用在img.src上。

示例:从 Blob 中提取数据

从Blob中读取内容的唯一方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取:

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result 包含转化为类型数组的blob
});
reader.readAsArrayBuffer(blob);

通过使用 FileReader 的其它方法可以把Blob读取为字符串或者数据URL。

规范

Specification Status Comment
File API
Blob
Working Draft Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) 13.0 (13.0) ? ? ?
slice() ? (Yes) ? ? ? ?
Blob() constructor ? (Yes) ? ? ? ?

[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) 之前,有个bug会影响slice()的行为,就是参数 start和 end的值不能超出64位有符号数字范围,现已修复。

[4] 请看 bug 1048325

Gecko 备注:特权许可

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

Cu.importGlobalProperties(['Blob']);

Blob可以在 Worker 作用域内使用。

相关链接

文档标签和贡献者

标签: 
 最后编辑者: mxyzzhong,