Blob對象怎么在JavaScript使用使用-創(chuàng)新互聯(lián)

本篇文章為大家展示了Blob對象怎么在JavaScript使用使用，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

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

blob對象介紹

一個 Blob對象表示一個不可變的, 原始數(shù)據(jù)的類似文件對象。Blob表示的數(shù)據(jù)不一定是一個JavaScript原生格式 blob對象本質(zhì)上是js中的一個對象，里面可以儲存大量的二進制編碼格式的數(shù)據(jù)。

創(chuàng)建blob對象

創(chuàng)建blob對象本質(zhì)上和創(chuàng)建一個其他對象的方式是一樣的，都是使用Blob() 的構(gòu)造函數(shù)來進行創(chuàng)建。構(gòu)造函數(shù)接受兩個參數(shù)：

第一個參數(shù)為一個數(shù)據(jù)序列，可以是任意格式的值。

第二個參數(shù)是一個包含兩個屬性的對象{ type: MIME的類型, endings: 決定第一個參數(shù)的數(shù)據(jù)格式，可以取值為 "transparent" 或者 "native"（transparent的話不變，是默認值，native 的話按操作系統(tǒng)轉(zhuǎn)換）。 }

Blob()構(gòu)造函數(shù)允許使用其他對象創(chuàng)建一個Blob對象，比如用字符串構(gòu)建一個blob

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
 {type : 'application/json'});

既然是對象，那么blob也擁有自己的屬性以及方法

屬性

Blob.isClosed (只讀)

布爾值，指示 Blob.close() 是否在該對象上調(diào)用過。關(guān)閉的 blob 對象不可讀。

Blob.size (只讀)

Blob 對象中所包含數(shù)據(jù)的大?。ㄗ止?jié)）。

Blob.type (只讀)

一個字符串，表明該Blob對象所包含數(shù)據(jù)的MIME類型。如果類型未知，則該值為空字符串。

方法

Blob.close()

關(guān)閉 Blob 對象，以便能釋放底層資源。

Blob.slice([start[, end[, contentType]]])

返回一個新的 Blob 對象，包含了源 Blob 對象中指定范圍內(nèi)的數(shù)據(jù)。其實就是對這個blob中的數(shù)據(jù)進行切割，我們在對文件進行分片上傳的時候需要使用到這個方法。

看到上面這些方法和屬性，使用過HTML5提供的File接口的應(yīng)該都很熟悉，這些屬性和方法在File接口中也都有。其實File接口就是基于Blob，繼承blob功能并將其擴展為支持用戶系統(tǒng)上的文件，也就是說：

File接口中的Flie對象就是繼承與Blob對象。

blob對象的使用

上面說了很多關(guān)于Blob對象的一些概念性的東西，下面我們來看看實際用途。

分片上傳

首先說說分片上傳，我們在進行文件上傳的時候，因為服務(wù)器的限制，會限制每一次上傳到服務(wù)器的文件大小不會很大，這個時候我們就需要把一個需要上傳的文件進行切割，然后分別進行上傳到服務(wù)器。

假如需要做到這一步，我們需要解決兩個問題:

怎么切割?
怎么得知當前傳輸?shù)倪M度?

首先怎么切割的問題上面已經(jīng)有過說明，因為File文件對象是繼承與Blob對象的，因此File文件對象也擁有slice這個方法，我們可以使用這個方法將任何一個File文件進行切割。

代碼如下：

var BYTES_PER_CHUNK = 1024 * 1024; // 每個文件切片大小定為1MB .
var blob = document.getElementById("file").files[0];
var slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
var blobs = [];
slices.forEach(function(item, index) {
  blobs.push(blob.slice(index,index + 1));
});

通過上面的方法。我們就得到了一個切割之后的File對象組成的數(shù)組blobs；

接下來要做的時候就是講這些文件分別上傳到服務(wù)器。

在HTTP1.1以上的協(xié)議中，有Transfer-Encoding這個編碼協(xié)議，用以和服務(wù)器通信，來得知當前分片傳遞的文件進程。

這樣解決了這兩個問題，我們不僅可以對文件進行分片上傳，并且能夠得到文件上傳的進度。

粘貼圖片

blob還有一個應(yīng)用場景，就是獲取剪切板上的數(shù)據(jù)來進行粘貼的操作。例如通過QQ截圖后，需要在網(wǎng)頁上進行粘貼操作。

粘貼圖片我們需要解決下面幾個問題

監(jiān)聽用戶的粘貼操作
獲取到剪切板上的數(shù)據(jù)
將獲取到的數(shù)據(jù)渲染到網(wǎng)頁中

首先我們可以通過paste事件來監(jiān)聽用戶的粘貼操作:

document.addEventListener('paste', function (e) {
  console.info(e);
});

然后通過事件對象中的clipboardData 對象來獲取圖片的文件數(shù)據(jù)。

clipboardData對象介紹

介紹一下 clipboardData 對象，它實際上是一個 DataTransfer 類型的對象， DataTransfer 是拖動產(chǎn)生的一個對象，但實際上粘貼事件也是它。

clipboardData 的屬性介紹

屬性	類型	說明
dropEffect	String	默認是 none
effectAllowed	String	默認是 uninitialized
files	FileList	粘貼操作為空List
items	DataTransferItemList	剪切板中的各項數(shù)據(jù)
types	Array	剪切板中的數(shù)據(jù)類型該屬性在Safari下比較混亂

items 介紹

items 是一個 DataTransferItemList 對象，自然里面都是 DataTransferItem 類型的數(shù)據(jù)了。

屬性

items 的 DataTransferItem 有兩個屬性 kind 和 type

屬性	說明
kind	一般為 string 或者 file
type	具體的數(shù)據(jù)類型，例如具體是哪種類型字符串或者哪種類型的文件，即 MIME-Type

方法

方法	參數(shù)	說明
getAsFile	空	如果 kind 是 file ，可以用該方法獲取到文件
getAsString	function(str)	如果 kind 是 string ，可以用該方法獲取到字符串str

在原型上還有一些其他方法，不過在處理剪切板操作的時候一般用不到了。

type 介紹

一般 types 中常見的值有 text/plain 、 text/html 、 Files 。

值	說明
text/plain	普通字符串
text/html	帶有樣式的html
Files	文件(例如剪切板中的數(shù)據(jù))

有了上面這些方法，我們可以解決第二個問題即獲取到剪切板上的數(shù)據(jù)。

document.addEventListener('paste', function (e) {
  console.info(e);
  var cbd = e.clipboardData;
  for(var i = 0; i < cbd.items.length; i++) {
    var item = cbd.items[i];
    console.info(item);
    if(item.kind == "file"){
      var blob = item.getAsFile();
      if (blob.size === 0) {
        return;
      }
      console.info(blob);
    }
  }
});

最后我們需要將獲取到的數(shù)據(jù)渲染到網(wǎng)頁上。

其實這個本質(zhì)上就是一個類似于上傳圖片本地瀏覽的問題。我們可以直接通過HTML5的File接口將獲取到的文件上傳到服務(wù)器然后通過講服務(wù)器返回的url地址來對圖片進行渲染。也可以使用fileRender對象來進行圖片本地瀏覽。

fileRender對象簡介

從Blob中讀取內(nèi)容的唯一方法是使用 FileReader。

FileReader接口有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法并不會返回讀取結(jié)果，這一結(jié)果存儲在result屬性中。

方法名	參數(shù)	描述
readAsBinaryString	file	將文件讀取為二進制編碼
readAsText	file,[encoding]	將文件讀取為文本
readAsDataURL	file	將文件讀取為DataURL
abort	(none)	終端讀取操作

FileReader接口包含了一套完整的事件模型，用于捕獲讀取文件時的狀態(tài)。

事件	描述
onabort	中斷
onerror	出錯
onloadstart	開始
onprogress	正在讀取
onload	成功讀取
onloadend	讀取完成，無論成功失敗

通過上面的方法以及事件，我們可以發(fā)現(xiàn)，通過readAsDataURL方法及onload事件就可以拿到一個可本地瀏覽圖片的DataURL。

最終代碼如下：

document.addEventListener('paste', function (e) {
  console.info(e);
  var cbd = e.clipboardData;
    var fr = new FileReader();
    var html = '';
    for(var i = 0; i < cbd.items.length; i++) {
      var item = cbd.items[i];
      console.info(item);
      if(item.kind == "file"){
        var blob = item.getAsFile();
        if (blob.size === 0) {
          return;
        }
        console.info(blob);
        fr.readAsDataURL(blob);
        fr.on<x>load=function(e){
          var result=document.getElementById("result");
          //顯示文件
          result.innerHTML='<img src="' + this.result +'" alt="" />';
        }
      }
    }
});

上述內(nèi)容就是Blob對象怎么在JavaScript使用使用，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文名稱：Blob對象怎么在JavaScript使用使用-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://muchs.cn/article44/dhecee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、移動網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、微信小程序、建站公司、網(wǎng)站設(shè)計

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

猜你還喜歡下面的內(nèi)容