本篇內(nèi)容主要講解“HTML5中的Blob對象如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5中的Blob對象如何使用”吧!

創(chuàng)新互聯(lián)公司專注于利辛企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設,商城建設。利辛網(wǎng)站建設公司,為利辛等地區(qū)提供建站服務。全流程按需策劃，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

HTML5中的Blob對象和MySQL中的BLOB類型在概念上是有點區(qū)別的。MYSQL中的BLOB類型就只是個二進制數(shù)據(jù)容器。而HTML5中的Blob對象除了存放二進制數(shù)據(jù)外還可以設置這個數(shù)據(jù)的MINE類型，這相當于對文件的儲存，其它很多二進制對象也是從這個對象繼承的。

在稍低版本的現(xiàn)代瀏覽器中，這個Blob對象還沒規(guī)范化，因此需要BlobBuilder之類的方式來創(chuàng)建。但是現(xiàn)在Blob已經(jīng)規(guī)范到可以直接new它的構造器Blob來創(chuàng)建了，而且瀏覽器幾乎都已經(jīng)支持了這個方式，所以對于舊標準咱就沒必要糾結了。

CSS Code復制內(nèi)容到剪貼板

var data='<b style="font-size:32px;color:red;">次碳酸鈷</b>';   

var blob=new Blob([data],{"type":"text/html"});   

console.log(blob);  

這樣我們就創(chuàng)建了一個Blob對象，注意Blob這個構造器的參數(shù)比較詭異，第一個參數(shù)是一組數(shù)據(jù)，所以必須是數(shù)組，即使像上面的例子一樣只有一個字符串也必須用數(shù)組裝起來。第二個參數(shù)是對這一Blob對象的配置屬性，目前也只有一個type也就是相關的MIME需要設置，使用key-value的方式也許是為了今后的擴展。

那么，把數(shù)據(jù)做成Blob有什么用呢？對于Blob對象，我們可以創(chuàng)建出一個URL來訪問它。使用URL對象的createObjectURL方法。

CSS Code復制內(nèi)容到剪貼板

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的生存周期是從創(chuàng)建到文檔釋放，不會造成資源的浪費。

Blob是一個HTML5中很基本的二進制數(shù)據(jù)對象，很多方法的操作參數(shù)都支持使用Blob，這個我一下也列舉不出。總之，幾乎所有參數(shù)類型是二進制數(shù)據(jù)的方法都支持使用Blob作為參數(shù)就對了。所以把數(shù)據(jù)做成Blob可以讓之后的一些列操作變得更方便。

方法

slice()

返回一個新的Blob對象,包含了源Blob對象中指定范圍內(nèi)的數(shù)據(jù).

CSS Code復制內(nèi)容到剪貼板

Blob slice(   

  optional long long start,   

  optional long long end,   

  optional DOMString contentType   

};  

參數(shù)

start 可選

開始索引,可以為負數(shù),語法類似于數(shù)組的slice方法.默認值為0.

end 可選

結束索引,可以為負數(shù),語法類似于數(shù)組的slice方法.默認值為最后一個索引.

contentType 可選

新的Blob對象的MIME類型,這個值將會成為新的Blob對象的type屬性的值,默認為一個空字符串.

返回值

一個新的Blob對象,包含了源Blob對象中指定范圍內(nèi)的數(shù)據(jù).

注意

如果start參數(shù)的值比源Blob對象的size屬性的值還大,則返回的Blob對象的size值為0,也就是不包含任何數(shù)據(jù).

BlobPropertyBag

一個包含有兩個屬性type和endings的對象.

type

設置該Blob對象的type屬性.

endings(已廢棄)

對應于BlobBuilder.append()方法的endings參數(shù).該參數(shù)的值可以是"transparent"或者"native".

Blob構造函數(shù)用法舉例

下面的代碼:

CSS Code復制內(nèi)容到剪貼板

var aFileParts = ["<a id=/"a/"><b id=/"b/">hey!<//b><//a>"];   

var oMyBlob = new Blob(aFileParts, { "type" : "text//xml" }); // the blob  

等價于:

CSS Code復制內(nèi)容到剪貼板

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接口提供了另外一種創(chuàng)建Blob對象的方式,但該方式現(xiàn)在已經(jīng)廢棄,所以不應該再使用了.

例子:使用類型數(shù)組和Blob對象創(chuàng)建一個對象URL

CSS Code復制內(nèi)容到剪貼板

var typedArray = GetTheTypedArraySomehow();   

var blob = new Blob([typedArray], {type: "application/octet-binary"}); // 傳入一個合適的MIME類型   

var url = URL.createObjectURL(blob);   

// 會產(chǎn)生一個類似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf這樣的URL字符串   

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

到此，相信大家對“HTML5中的Blob對象如何使用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

當前名稱：HTML5中的Blob對象如何使用
文章網(wǎng)址：http://www.chinadenli.net/article12/jdhggc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站營銷、網(wǎng)站維護、python、做網(wǎng)站、自適應網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)