HTML5中的Blob對象和MYSQL中的BLOB類型在概念上是有點區別的。MYSQL中的BLOB類型就只是個二進制數據容器。而HTML5中的Blob對象除了存放二進制數據外還可以設置這個數據的MINE類型，這相當於對文件的儲存，其它很多二進制對象也是從這個對象繼承的。
一個Blob對象就是一個包含有只讀原始數據的類文件對象.Blob對象中的數據並不一定得是JavaScript中的原生形式.File接口基於Blob,繼承了Blob的功能,並且擴展支持了用戶計算機上的本地文件.
創建Blob對象的方法有幾種,可以調用Blob構造函數,還可以使用一個已有Blob對象上的slice()方法切出另一個Blob對象,還可以調用canvas對象上的toBlob方法.
slice()方法仍帶有前綴:Firefox 12之前的版本上為
blob.mozSlice(),Safari上為
blob.webkitSlice().
屬性
| 屬性名 | 類型 | 描述 |
size |
unsigned long long |
Blob對象中所包含數據的大小(單位字節). 只讀. |
type |
DOMString |
一個字符串,表明該Blob對象所包含數據的MIME類型.如果類型未知,則該值為空字符串. 只讀. |
構造函數
Blob Blob(
[optional] Array parts,
[optional] BlobPropertyBag properties
);
參數
-
parts -
一個數組,包含了將要添加到
Blob對象中的數據.數組元素可以是任意多個的ArrayBuffer,ArrayBufferView(typed array),Blob,或者DOMString對象. -
properties -
一個對象,設置
Blob對象的一些屬性.查看BlobPropertyBag一節.
方法
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()方法的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
例子:使用類型數組和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上.
瀏覽器兼容性
注意:關於slice()的實現
slice()方法一開始使用length來作為第二個參數,表示需要向新的Blob對象拷貝多少個字節.如果你指定的參數值start + length的值超過了源Blob對象的長度,則返回的Blob對象包含了從start索引到源Blob對象結束索引處的所有數據.
這個版本的slice()實現於Firefox 4, WebKit,以及 Opera 11.10中.可是,由於這個語法和我們常用的Array.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位無符號數字范圍,現已修復.
HTML5的Blob對象簡介
HTML5中的Blob對象和MYSQL中的BLOB類型在概念上是有點區別的。MYSQL中的BLOB類型就只是個二進制數據容器。而HTML5中的Blob對象除了存放二進制數據外還可以設置這個數據的MINE類型，這相當於對文件的儲存，其它很多二進制對象也是從這個對象繼承的。
在稍低版本的現代瀏覽器中，這個Blob對象還沒規范化，因此需要BlobBuilder之類的方式來創建。但是現在Blob已經規范到可以直接new它的構造器Blob來創建了，而且瀏覽器幾乎都已經支持了這個方式，所以對於舊標准咱就沒必要糾結了。
var data='<b style="font-size:32px;color:red;">次碳酸鈷</b>'; var blob=new Blob([data],{"type":"text/html"}); console.log(blob);
這樣我們就創建了一個Blob對象，注意Blob這個構造器的參數比較詭異，第一個參數是一組數據，所以必須是數組，即使像上面的例子一樣只有一個字符串也必須用數組裝起來。第二個參數是對這一Blob對象的配置屬性，目前也只有一個type也就是相關的MIME需要設置，使用key-value的方式也許是為了今后的擴展。
那么，把數據做成Blob有什么用呢？對於Blob對象，我們可以創建出一個URL來訪問它。使用URL對象的createObjectURL方法。
var data='<b style="font-size:32px;color:red;">次碳酸鈷</b>'; var blob=new Blob([data],{"type":"text/html"}); onload=function(){ var iframe=document.createElement("iframe"); iframe.src=URL.createObjectURL(blob); document.body.appendChild(iframe); };
不僅是上面例子中的text/html，任何瀏覽器支持的類型都可以這么用。而且這個Blob-URL的生存周期是從創建到文檔釋放，不會造成資源的浪費。
Blob是一個HTML5中很基本的二進制數據對象，很多方法的操作參數都支持使用Blob，這個我一下也列舉不出。總之，幾乎所有參數類型是二進制數據的方法都支持使用Blob作為參數就對了。所以把數據做成Blob可以讓之后的一些列操作變得更方便。