一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File
接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。
要从其他非blob对象和数据构造一个Blob,请使用 Blob()
构造函数。要创建一个包含另一个blob的数据子集的blob,请使用 slice()
方法。要从用户文件系统上的一个文件中获取一个Blob对象,请参阅 File
文档。
接受Blob对象的APIs也被列在 File
文档中。
注: 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] | ? | ? | ? |
[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 可用。