JavaScript Blob對(duì)象原理及用法詳解
Blob是JavaScript內(nèi)建對(duì)象,表示不可變的原始數(shù)據(jù),類似文件的對(duì)象。
blob是表示原始數(shù)據(jù)的不可變對(duì)象,這些數(shù)據(jù)不一定是JavaScript原生格式的,文件接口基于Blob,繼承Blob功能并將其擴(kuò)展為支持用戶系統(tǒng)上的文件。
Blob有很多用途:
可以從網(wǎng)絡(luò)的內(nèi)容創(chuàng)建。
可以保存到磁盤或從磁盤讀取。
例如,它們是FileReader API中使用的File的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)。
我們可以使用 Blob() 構(gòu)造函數(shù)從其他非blob對(duì)象和數(shù)據(jù)構(gòu)造Blob。
Blob構(gòu)造函數(shù)
Blob構(gòu)造函數(shù)允許從其他對(duì)象創(chuàng)建Blob。例如,從字符串構(gòu)造Blob。
let hero = {name: 'Batman'}
let blobObject = new Blob([jsON.stringify(hero, null, 2)], { type: 'application/json' });
console.log(blobObject);
現(xiàn)在,如果我們在瀏覽器中運(yùn)行此文件,我們將在瀏覽器控制臺(tái)中看到以下輸出。
Blob size 屬性
Blob.size 屬性返回Blob或File的大?。ㄒ宰止?jié)為單位)。
var sizeInBytes = blob.size
參見以下示例。
let hero = {name: 'Batman'}
let blobObject = new Blob([JSON.stringify(hero, null, 2)],{ type: 'application/json' });
console.log(blobObject.size);
將會(huì)輸出:22
Blob.slice() 方法
Blob.slice() 函數(shù)用于創(chuàng)建新的Blob對(duì)象,該對(duì)象包含源Blob的指定字節(jié)范圍內(nèi)的數(shù)據(jù)。
instanceOfBlob.slice([start [, end [, contentType]]]);
參見以下代碼。
let hero = {name: 'Batman'}
let blobObject = new Blob([JSON.stringify(hero, null, 2)], { type: 'application/json' });
console.log(blobObject.slice(10, 16, { type: 'application/json' }));
輸出
總結(jié)
使用二進(jìn)制遠(yuǎn)程文件時(shí),Blob非常有用。
Blob可能非常大,即也可能包含音頻和視頻數(shù)據(jù)??梢詣?dòng)態(tài)創(chuàng)建它們,并使用Blob URL用作文件。我們可以通過多種不同方式使用它們,以使它們更有用。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript實(shí)現(xiàn)前端簡單的路由實(shí)例
本文將使用javascript實(shí)現(xiàn)一個(gè)極其簡單的路由實(shí)例。WEB開發(fā)中路由概念并不陌生,我們接觸到的有前端路由和后端路由。后端路由在很多框架中是一個(gè)重要的模塊,同樣前端路由在單頁面應(yīng)用也很常見,它使得前端頁面體驗(yàn)更流暢。2016-09-09js自動(dòng)滑動(dòng)+鼠標(biāo)滑動(dòng)區(qū)域
js自動(dòng)滑動(dòng)+鼠標(biāo)滑動(dòng)區(qū)域...2007-08-08js實(shí)現(xiàn)輪播圖的兩種方式(構(gòu)造函數(shù)、面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖的兩種方式,一是構(gòu)造函數(shù)、另一種是面向?qū)ο蠓绞椒绞?,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09JavaScript該如何學(xué)習(xí) 怎樣輕松學(xué)習(xí)JavaScript
JavaScript該如何學(xué)習(xí)?如何輕松學(xué)習(xí)JavaScript?這篇文章主要介紹了輕松學(xué)習(xí)JavaScript的方法2017-06-06JS多個(gè)表單數(shù)據(jù)提交下的serialize()應(yīng)用實(shí)例分析
這篇文章主要介紹了JS多個(gè)表單數(shù)據(jù)提交下的serialize()應(yīng)用,接合實(shí)例形式分析了原生javascript實(shí)現(xiàn)多個(gè)表單提交時(shí)serialize操作相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-08-08javascript 節(jié)點(diǎn)遍歷函數(shù)
火狐官網(wǎng)上找到的一組函數(shù),相當(dāng)于treeWalker,有了它可以方便地在IE實(shí)現(xiàn)Traversal API 2的所有功能2010-03-03解析dom中的children對(duì)象數(shù)組元素firstChild,lastChild的使用
以下是對(duì)dom中的children對(duì)象數(shù)組元素firstChild,lastChild的使用進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以參考下2013-07-07javascript oop開發(fā)滑動(dòng)(slide)菜單控件
這里因?yàn)槭茄菔舅宰孒TML CSS盡量的簡化,另外使用jquery的 fn.slideUp fn.slideDown 實(shí)現(xiàn)起來會(huì)更容易不過我作為一個(gè)專業(yè)的開發(fā)者多了解些原生的JS對(duì)技術(shù)的提高還是很有幫助。2010-08-08