Blob DOM JS

约定不等于承诺〃 2021-10-01 02:38 269阅读 0赞

# Blob #

## TABLE OF CONTENTS ##

1.  `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` ``
2.  [属性][Link 1]````````````
3.  [构造函数][Link 2]````````````````
4.  [方法][Link 3]
    
    1.  [slice()][slice]````
        
        1.  [参数][Link 4]``````````````````
        2.  [返回值][Link 5]````
        3.  [注意][Link 6]````````
5.  [BlobPropertyBag][]````````````````
6.  [Blob构造函数用法举例][Blob]````
7.  [例子:使用类型数组和Blob对象创建一个对象URL][Blob_URL]
8.  [浏览器兼容性][Link 7]````
    
    1.  [注意:关于slice()的实现][slice 1]``````````````````````````
    2.  [Gecko备注][Gecko]``````
9.  [相关链接][Link 8]``````

*  TAGS 
 *  文件

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

创建`Blob`对象的方法有几种,可以调用[`Blob`][Blob 1]构造函数,还可以使用一个已有`Blob`对象上的`slice()方法`切出另一个`Blob`对象,还可以调用[`canvas`][canvas]对象上的`toBlob`方法.

**注:** 需要注意的是,一些浏览器上的 `slice()方法`仍带有前缀:Firefox 12之前的版本上为 `blob.mozSlice(),`Safari上为 `blob.webkitSlice()`.

**注:** 一些浏览器提供了 [`BlobBuilder`][BlobBuilder]接口,但并不是所有的浏览器都支持 `BlobBuilder`,而且现有的 `BlobBuilder`实现都是带前缀的.更主要的是 `BlobBuilder已经被废弃,你应该尽可能的使用` `Blob`构造函数来代替.

## 属性 ##

<table style="border-collapse:collapse; border-spacing:0px; margin:0px 0px 1.286em; border:1px solid rgb(187,187,187)"> 
 <tbody> 
  <tr> 
   <td style="border:1px solid rgb(187,187,187); padding:0px 5px; vertical-align:top; background-color:rgb(238,238,238); font-weight:bold"> 属性名&nbsp;&nbsp;&nbsp;&nbsp;</td> 
   <td style="border:1px solid rgb(187,187,187); padding:0px 5px; vertical-align:top; background-color:rgb(238,238,238); font-weight:bold"> 类型</td> 
   <td style="border:1px solid rgb(187,187,187); padding:0px 5px; vertical-align:top; background-color:rgb(238,238,238); font-weight:bold"> 描述</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; vertical-align:top"><code style="font-size:14px; font-family:'Courier New','Andale Mono',monospace">size&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; vertical-align:top"><code style="font-size:14px; font-family:'Courier New','Andale Mono',monospace">unsigned long long</code></td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; vertical-align:top"><code style="font-size:14px; font-family:'Courier New','Andale Mono',monospace">Blob对象中所包含数据的大小</code>.&nbsp;<strong>只读.</strong></td> 
  </tr> 
  <tr> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; vertical-align:top"><code style="font-size:14px; font-family:'Courier New','Andale Mono',monospace">type</code></td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; vertical-align:top"><a href="https://developer.mozilla.org/zh-CN/docs/DOM/DOMString" title="/zh-CN/docs/DOM/DOMString" style="color:rgb(102,153,204); text-decoration:none" rel="nofollow"><code style="font-size:14px; font-family:'Courier New','Andale Mono',monospace; color:inherit">DOMString</code></a></td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; vertical-align:top">一个字符串,表明该<code style="font-size:14px; font-family:'Courier New','Andale Mono',monospace">Blob对象所包含数据的MIME类型</code>.如果类型未知,则该值为空字符串.&nbsp;<strong>只读.</strong></td> 
  </tr> 
 </tbody> 
</table>

## 构造函数 ##

Blob Blob(
      [optional] Array parts,
      [optional] BlobPropertyBag properties
    );

###### 参数 ######

`parts`

一个数组,包含了将要添加到 `Blob对象中的`数据.数组元素可以是任意多个的 `ArrayBuffer,ArrayBufferView` (typed array),  [`Blob`][Blob 1],或者  [`DOMString`][DOMString]对象.

`properties`

一个对象,设置 `Blob对象的一些属性`.查看 [`BlobPropertyBag`][BlobPropertyBag 1]一节.

## 方法 ##

### slice() ###

返回一个新的`Blob`对象,包含了源`Blob对象中指定范围内的数据`.

Blob slice(
      optional long long start,
      optional long long end,
      optional DOMString contentType
    };

#### 参数 ####

`start`  可选

开始索引,可以为负数,语法类似于数组的 `slice`方法.默认值为0.

`end`  可选

结束索引,可以为负数,语法类似于数组的 `slice`方法.默认值为 `最后一个索引`.

`contentType`  可选

新的 `Blob对象的MIME类型,`这个值将会成为新的 `Blob对象的` `type属性的值,默认为一个空字符串`.

#### 返回值 ####

一个新的`Blob`对象,包含了源`Blob对象中指定范围内的数据`.

#### 注意 ####

如果`start`参数的值比源`Blob对象的`size`属性的值还大`,则返回的`Blob`对象的size值为0,也就是不包含任何数据.

## BlobPropertyBag ##

一个包含有两个属性`type`和`endings`的对象.

`type`

设置该 `Blob对象的` `type属性`.

`endings(已废弃)`

对应于 [`BlobBuilder.append()`][BlobBuilder.append]方法的 `endings`参数.该参数的值可以是"transparent"或者"native".

## Blob构造函数用法举例 ##

下面的代码:

var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];
    var oMyBlob = new Blob(aFileParts, {  "type" : "text\/xml" }); // the blob

等价于:

var oBuilder = new BlobBuilder();
    var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];
    oBuilder.append(aFileParts[0]);
    var oMyBlob = oBuilder.getBlob("text\/xml"); // the blob

[`BlobBuilder`][BlobBuilder]接口提供了另外一种创建`Blob`对象的方式,但该方式现在已经废弃,所以不应该再使用了.

## 例子:使用类型数组和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上.

## 浏览器兼容性 ##

*  Desktop 
 *  Mobile

<table style="border-collapse:collapse; border-spacing:0px; margin:0px; border:1px solid rgb(187,187,187)"> 
 <tbody> 
  <tr> 
   <th style="font-style:inherit; border:1px solid rgb(187,187,187); padding:0px 5px; background-color:rgb(238,238,238)"> Feature</th> 
   <th style="font-style:inherit; border:1px solid rgb(187,187,187); padding:0px 5px; background-color:rgb(238,238,238)"> Chrome</th> 
   <th style="font-style:inherit; border:1px solid rgb(187,187,187); padding:0px 5px; background-color:rgb(238,238,238)"> Firefox (Gecko)</th> 
   <th style="font-style:inherit; border:1px solid rgb(187,187,187); padding:0px 5px; background-color:rgb(238,238,238)"> Internet Explorer</th> 
   <th style="font-style:inherit; border:1px solid rgb(187,187,187); padding:0px 5px; background-color:rgb(238,238,238)"> Opera</th> 
   <th style="font-style:inherit; border:1px solid rgb(187,187,187); padding:0px 5px; background-color:rgb(238,238,238)"> Safari (WebKit)</th> 
  </tr> 
  <tr> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> Basic support</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 5</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 4</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 10</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 11.10</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 5.1</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> <code style="font-size:14px; font-family:'Courier New','Andale Mono',monospace">slice()</code></td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> <p style="margin-top:0px; margin-bottom:1.286em; padding-top:0px; padding-bottom:0px; line-height:1.5em"> 21<br> 10&nbsp;<span title="prefix" style="border:1px solid rgb(129,129,81); font-size:undefined; white-space:nowrap; padding:0px 2px; margin:0px 2px; background-color:rgb(228,237,247)">webkit</span>‡</p> </td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 13<br> 5&nbsp;<span title="prefix" style="border:1px solid rgb(129,129,81); font-size:undefined; white-space:nowrap; padding:0px 2px; margin:0px 2px; background-color:rgb(228,237,247)">moz</span>‡</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 10</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 12</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 5.1 (<a href="http://trac.webkit.org/changeset/83873" style="color:rgb(102,153,204); text-decoration:none; padding-right:16px; background-color:transparent" rel="nofollow">534.29</a>)&nbsp;<span title="prefix" style="border:1px solid rgb(129,129,81); font-size:undefined; white-space:nowrap; padding:0px 2px; margin:0px 2px; background-color:rgb(228,237,247)">webkit</span></td> 
  </tr> 
  <tr> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> <code style="font-size:14px; font-family:'Courier New','Andale Mono',monospace">Blob()</code>&nbsp;constructor</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 20</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 13.0 (13.0)</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 10</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 12.10</td> 
   <td style="border:1px solid rgb(204,204,204); padding:5px; background-color:rgb(255,255,255); vertical-align:top; word-wrap:break-word"> 6 (<a href="http://trac.webkit.org/changeset/115582" style="color:rgb(102,153,204); text-decoration:none; padding-right:16px; background-color:transparent" rel="nofollow">536.10</a>)</td> 
  </tr> 
 </tbody> 
</table>

### 注意:关于slice()的实现 ###

`slice()方法一开始`使用`length来作为第二个参数`,表示需要向新`的Blob对象拷贝多少个字节`.如果你指定的参数值`start + length的值超过`了源`Blob对象的长度`,则返回的`Blob`对象包含了从`start索引到源``Blob对象结束索引处的所有数据`.

这个版本的`slice()`实现于[Firefox 4][], [WebKit][],以及 [Opera 11.10][]中.可是,由于这个语法和我们常用的[`Array.slice()`][Array.slice]以及[`String.slice()`][String.slice]语法不同,所以已被废弃.Gecko和WebKit目前支持的是新版的`slice`语法.

从Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10)和Chrome 21开始,`slice()`去掉了前缀.‡

### Gecko备注 ###

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

## 相关链接 ##

*  [File API Specification: Blob][File API Specification_ Blob]WD
 *  [File API Specification: Blob][File API Specification_ Blob 1]ED
 *  [`BlobBuilder`][BlobBuilder]
 *  [`File`][File]
 *  [`FormData`][FormData]

[Link 1]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#.E5.B1.9E.E6.80.A7
[Link 2]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#.E6.9E.84.E9.80.A0.E5.87.BD.E6.95.B0
[Link 3]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#.E6.96.B9.E6.B3.95
[slice]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#slice%28%29
[Link 4]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#.E5.8F.82.E6.95.B0
[Link 5]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#.E8.BF.94.E5.9B.9E.E5.80.BC
[Link 6]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#.E6.B3.A8.E6.84.8F
[BlobPropertyBag]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#BlobPropertyBag
[Blob]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#Blob.E6.9E.84.E9.80.A0.E5.87.BD.E6.95.B0.E7.94.A8.E6.B3.95.E4.B8.BE.E4.BE.8B
[Blob_URL]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#.E4.BE.8B.E5.AD.90.3A.E4.BD.BF.E7.94.A8.E7.B1.BB.E5.9E.8B.E6.95.B0.E7.BB.84.E5.92.8CBlob.E5.AF.B9.E8.B1.A1.E5.88.9B.E5.BB.BA.E4.B8.80.E4.B8.AA.E5.AF.B9.E8.B1.A1URL
[Link 7]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#.E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7
[slice 1]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#.E6.B3.A8.E6.84.8F.3A.E5.85.B3.E4.BA.8Eslice%28%29.E7.9A.84.E5.AE.9E.E7.8E.B0
[Gecko]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#Gecko.E5.A4.87.E6.B3.A8
[Link 8]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob#.E7.9B.B8.E5.85.B3.E9.93.BE.E6.8E.A5
[File]: https://developer.mozilla.org/zh-CN/docs/DOM/File
[Blob 1]: https://developer.mozilla.org/zh-CN/docs/DOM/Blob
[canvas]: https://developer.mozilla.org/zh-CN/docs/
[BlobBuilder]: https://developer.mozilla.org/zh-CN/docs/DOM/BlobBuilder
[DOMString]: https://developer.mozilla.org/zh-CN/docs/DOM/DOMString
[BlobPropertyBag 1]: https://developer.mozilla.org/zh-CN/DOM/Blob#BlobPropertyBag
[BlobBuilder.append]: https://developer.mozilla.org/zh-CN/docs/DOM/BlobBuilder#append%28%29
[Firefox 4]: https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6
[WebKit]: http://trac.webkit.org/changeset/55670
[Opera 11.10]: http://www.opera.com/docs/specs/presto28/file/#blob
[Array.slice]: https://developer.mozilla.org/zh-CN/JavaScript/Reference/Global_Objects/Array/slice
[String.slice]: https://developer.mozilla.org/zh-CN/JavaScript/Reference/Global_Objects/String/slice
[File API Specification_ Blob]: http://www.w3.org/TR/FileAPI/#dfn-Blob
[File API Specification_ Blob 1]: http://dev.w3.org/2006/webapi/FileAPI/#dfn-Blob
[FormData]: https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/FormData