HTML5中的Blob物件的使用

html5中的blob物件和mysql中的blob型別在概念上是有點區別的。

mysql中的blob型別就只是個二進位制資料容器。而html5中的blob物件除了存放二進位制資料外還可以設定這個資料的mine型別，這相當於對檔案的儲存，其它很多二進位制物件也是從這個物件繼承的。　　

在稍低版本的現代瀏覽器中，這個blob物件還沒規範化，因此需要blobbuilder之類的方式來建立。但是現在blob已經規範到可以直接new它的構造器blob來建立了，而且瀏覽器幾乎都已經支援了這個方式，所以對於舊標準咱就沒必要糾結了。

var data='次碳酸鈷';

這樣我們就建立了乙個blob物件，注意blob這個構造器的引數比較詭異，第乙個引數是一組資料，所以必須是陣列，即使像上面的例子一樣只有乙個字串也必須用數組裝起來。第二個引數是對這一blob物件的配置屬性，目前也只有乙個type也就是相關的mime需要設定，使用key-value的方式也許是為了今後的擴充套件。

那麼，把資料做成blob有什麼用呢？對於blob物件，我們可以建立出乙個url來訪問它。使用url物件的createobjecturl方法。

var data='次碳酸鈷';

不僅是上面例子中的text/html，任何瀏覽器支援的型別都可以這麼用。而且這個blob-url的生存週期是從建立到文件釋放，不會造成資源的浪費。　　blob是乙個html5中很基本的二進位制資料物件，很多方法的操作引數都支援使用blob，這個我一下也列舉不出。總之，幾乎所有引數型別是二進位制資料的方法都支援使用blob作為引數就對了。所以把資料做成blob可以讓之後的一些列操作變得更方便。

方法

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下面的**:

var afileparts = ["hey!"];

var omyblob = new blob(afileparts, ); // the blob

等價於

var obuilder = new blobbuilder();

var afileparts = ["hey!"];

var omyblob = obuilder.getblob("text\/xml"); // the blob

blobbuilder介面提供了另外一種建立blob物件的方式,但該方式現在已經廢棄,所以不應該再使用了.

例子:使用型別陣列和blob物件建立乙個物件url

css code複製內容到剪貼簿

var typedarray = getthetypedarraysomehow();

var url = url.createobjecturl(blob);

// 會產生乙個類似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf這樣的url字串

// 你可以像使用乙個普通url那樣使用它,比如用在img.src上.

文章**：

HTML5中的Blob物件的使用

HTML5之FileReader的簡易使用

HTML5中的sessionStorage使用示例

html5中的表單

HTML5中的Blob物件的使用

HTML5之FileReader的簡易使用

HTML5中的sessionStorage使用示例

html5中的表單

相關推薦