主頁 > 知識(shí)庫 > HTML5 Blob對象的具體使用

HTML5 Blob對象的具體使用

熱門標(biāo)簽:南昌仁和怎么申請開通400電話 電話機(jī)器人黑斑馬免費(fèi) 機(jī)器人外呼系統(tǒng)存在哪些能力 只辦理400電話 如何獲取地圖標(biāo)注客戶 電話機(jī)器人電銷系統(tǒng)掙話費(fèi) 拓展地圖標(biāo)注 平?jīng)龅貓D標(biāo)注位置怎么弄 高德地圖標(biāo)注地點(diǎn)糾錯(cuò)

寫在前面

本篇主要總結(jié)Blob對象屬性及作用,通過DEMO介紹Blob對象的應(yīng)用場景。

Blob對象

一直以來,JS都沒有比較好的可以直接處理二進(jìn)制的方法。而Blob的存在,允許我們可以通過JS直接操作二進(jìn)制數(shù)據(jù)。

一個(gè)Blob對象就是一個(gè)包含有只讀原始數(shù)據(jù)的類文件對象。Blob對象中的數(shù)據(jù)并不一定得是JavaScript中的原生形式。File接口基于Blob,繼承了Blob的功能,并且擴(kuò)展支持了用戶計(jì)算機(jī)上的本地文件。

Blob對象可以看做是存放二進(jìn)制數(shù)據(jù)的容器,此外還可以通過Blob設(shè)置二進(jìn)制數(shù)據(jù)的MIME類型。

創(chuàng)建Blob

通過構(gòu)造函數(shù)

var blob = new Blob(dataArr:Array<any>, opt:{type:string});

dataArray:數(shù)組,包含了要添加到Blob對象中的數(shù)據(jù),數(shù)據(jù)可以是任意多個(gè)ArrayBuffer,ArrayBufferView, Blob,或者 DOMString對象。

opt:對象,用于設(shè)置Blob對象的屬性(如:MIME類型)

1、創(chuàng)建一個(gè)裝填DOMString對象的Blob對象

2、創(chuàng)建一個(gè)裝填A(yù)rrayBuffer對象的Blob對象

3、創(chuàng)建一個(gè)裝填A(yù)rrayBufferView對象的Blob對象(ArrayBufferView可基于ArrayBuffer創(chuàng)建,返回值是一個(gè)類數(shù)組。如下:創(chuàng)建一個(gè)8字節(jié)的ArrayBuffer,在其上創(chuàng)建一個(gè)每個(gè)數(shù)組元素為2字節(jié)的“視圖”)

通過Blob.slice()

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

Blob.slice(start:number, end:number, contentType:string)

start:開始索引,默認(rèn)為0
end:截取結(jié)束索引(不包括end)
contentType:新Blob的MIME類型,默認(rèn)為空字符串

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
    console.log(blob);
});

應(yīng)用場景

前面提到,F(xiàn)ile接口基于Blob,繼承了Blob的功能并進(jìn)行了擴(kuò)展,故我們可以像使用Blob一樣使用File對象。

分片上傳

通過Blob.slice方法,可以將大文件分片,輪循向后臺(tái)提交各文件片段,即可實(shí)現(xiàn)文件的分片上傳。
分片上傳邏輯如下:

  • 獲取要上傳文件的File對象,根據(jù)chunk(每片大小)對文件進(jìn)行分片
  • 通過post方法輪循上傳每片文件,其中url中拼接querystring用于描述當(dāng)前上傳的文件信息;post body中存放本次要上傳的二進(jìn)制數(shù)據(jù)片段
  • 接口每次返回offset,用于執(zhí)行下次上傳

下面是分片上傳的簡單實(shí)現(xiàn):

initUpload();

//初始化上傳
function initUpload() {
    var chunk = 100 * 1024;   //每片大小
    var input = document.getElementById("file");    //input file
    input.onchange = function (e) {
        var file = this.files[0];
        var query = {};
        var chunks = [];
        if (!!file) {
            var start = 0;
            //文件分片
            for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
                var end = start + chunk;
                chunks[i] = file.slice(start , end);
                start = end;
            }
            
            // 采用post方法上傳文件
            // url query上拼接以下參數(shù),用于記錄上傳偏移
            // post body中存放本次要上傳的二進(jìn)制數(shù)據(jù)
            query = {
                fileSize: file.size,
                dataSize: chunk,
                nextOffset: 0
            }

            upload(chunks, query, successPerUpload);
        }
    }
}

// 執(zhí)行上傳
function upload(chunks, query, cb) {
    var queryStr = Object.getOwnPropertyNames(query).map(key => {
        return key + "=" + query[key];
    }).join("&");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://xxxx/opload?" + queryStr);
    xhr.overrideMimeType("application/octet-stream");
    
    //獲取post body中二進(jìn)制數(shù)據(jù)
    var index = Math.floor(query.nextOffset / query.dataSize);
    getFileBinary(chunks[index], function (binary) {
        if (xhr.sendAsBinary) {
            xhr.sendAsBinary(binary);
        } else {
            xhr.send(binary);
        }

    });

    xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                var resp = JSON.parse(xhr.responseText);
                // 接口返回nextoffset
                // resp = {
                //     isFinish:false,
                //     offset:100*1024
                // }
                if (typeof cb === "function") {
                    cb.call(this, resp, chunks, query)
                }
            }
        }
    }
}

// 每片上傳成功后執(zhí)行
function successPerUpload(resp, chunks, query) {
    if (resp.isFinish === true) {
        alert("上傳成功");
    } else {
        //未上傳完畢
        query.offset = resp.offset;
        upload(chunks, query, successPerUpload);
    }
}

// 獲取文件二進(jìn)制數(shù)據(jù)
function getFileBinary(file, cb) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function (e) {
        if (typeof cb === "function") {
            cb.call(this, this.result);
        }
    }
}

以上是文件分片上傳前端的簡單實(shí)現(xiàn),當(dāng)然,此功能還可以更加完善,如后臺(tái)需要對合并后的文件大小進(jìn)行校驗(yàn);或者前端加密文件,全部上傳完畢后后端解密校驗(yàn)等,此處不做贅述。

通過url下載文件

window.URL對象可以為Blob對象生成一個(gè)網(wǎng)絡(luò)地址,結(jié)合a標(biāo)簽的download屬性,可以實(shí)現(xiàn)點(diǎn)擊url下載文件
實(shí)現(xiàn)如下:

createDownload("download.txt","download file");

function createDownload(fileName, content){
    var blob = new Blob([content]);
    var link = document.createElement("a");
    link.innerHTML = fileName;
    link.download = fileName;
    link.href = URL.createObjectURL(blob);
    document.getElementsByTagName("body")[0].appendChild(link);
}

執(zhí)行后頁面上會(huì)生成此Blob對象的地址,點(diǎn)擊后可下載:

查看下載結(jié)果:

通過url顯示圖片

我們知道,img的src屬性及background的url屬性,都可以通過接收圖片的網(wǎng)絡(luò)地址或base64來顯示圖片,同樣的,我們也可以把圖片轉(zhuǎn)化為Blob對象,生成URL(URL.createObjectURL(blob)),來顯示圖片。

小結(jié)

本文主要介紹了Blob對象的屬性和使用場景,其實(shí)我們可以看到,Blob對象作為一個(gè)裝填二進(jìn)制數(shù)據(jù)的基本對象,其作用也僅僅是一個(gè)容器,而真正的業(yè)務(wù)功能則需要通過FileReader、URL、Canvas等對象實(shí)現(xiàn),之后會(huì)繼續(xù)對這些對象的功能和應(yīng)用場景進(jìn)行歸納。

參考資料

[1] MDN_Blob
[2] W3C Working Draft

到此這篇關(guān)于HTML5 Blob對象的具體使用的文章就介紹到這了,更多相關(guān)HTML5 Blob對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

標(biāo)簽:永州 漯河 青島 遼源 西藏 新疆 棗莊 池州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5 Blob對象的具體使用》,本文關(guān)鍵詞  HTML5,Blob,對象,的,具體,使用,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5 Blob對象的具體使用》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML5 Blob對象的具體使用的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章