這篇文章將為大家詳細(xì)講解有關(guān)如何在HTML5中使用Blob對(duì)象，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

我們提供的服務(wù)有：做網(wǎng)站、網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、尖草坪ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的尖草坪網(wǎng)站制作公司

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類(lèi)元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。  3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類(lèi)型的電腦或?yàn)g覽器。

Blob對(duì)象

一直以來(lái)，JS都沒(méi)有比較好的可以直接處理二進(jìn)制的方法。而B(niǎo)lob的存在，允許我們可以通過(guò)JS直接操作二進(jìn)制數(shù)據(jù)。

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

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

創(chuàng)建Blob

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

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

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

opt：對(duì)象，用于設(shè)置Blob對(duì)象的屬性（如：MIME類(lèi)型）

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

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

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

通過(guò)Blob.slice()

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

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

start：開(kāi)始索引，默認(rèn)為0
end：截取結(jié)束索引（不包括end）
contentType：新Blob的MIME類(lèi)型，默認(rèn)為空字符串

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

應(yīng)用場(chǎng)景

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

分片上傳

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

• 獲取要上傳文件的File對(duì)象，根據(jù)chunk（每片大?。?duì)文件進(jìn)行分片

• 通過(guò)post方法輪循上傳每片文件，其中url中拼接querystring用于描述當(dāng)前上傳的文件信息；post body中存放本次要上傳的二進(jìn)制數(shù)據(jù)片段

• 接口每次返回offset，用于執(zhí)行下次上傳

下面是分片上傳的簡(jiǎn)單實(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);
        }
    }
}

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

通過(guò)url下載文件

window.URL對(duì)象可以為Blob對(duì)象生成一個(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í)行后頁(yè)面上會(huì)生成此Blob對(duì)象的地址，點(diǎn)擊后可下載：

查看下載結(jié)果：

通過(guò)url顯示圖片

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

關(guān)于如何在HTML5中使用Blob對(duì)象就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

名稱(chēng)欄目：如何在HTML5中使用Blob對(duì)象
網(wǎng)站鏈接：http://aaarwkj.com/article36/jejdsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、外貿(mào)建站、移動(dòng)網(wǎng)站建設(shè)、微信公眾號(hào)、手機(jī)網(wǎng)站建設(shè)、用戶體驗(yàn)

廣告

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