js中的Blob對象類型解析

今天小編給大家分享的是js中的Blob對象類型解析，很多人都不太了解，今天小編為了讓大家更加了解js中的Blob對象類型，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會有所收獲的哦。

構(gòu)建一個Blob對象通常有三種方式：

1、通過Blob對象的構(gòu)造函數(shù)來構(gòu)建。

2、從已有的Blob對象調(diào)用slice接口切出一個新的Blob對象。

3、canvas API toBlob方法，把當(dāng)前繪制信息轉(zhuǎn)為一個Blob對象。下面只看第一種的實現(xiàn)：

用法：新方法創(chuàng)建Blob 對象（構(gòu)造函數(shù)來構(gòu)建）

var blob = new Blob(array[optional], options[optional]);

構(gòu)造函數(shù)，接受兩個參數(shù)

第一個參數(shù)：為一個數(shù)據(jù)序列，可以是任意格式的值，例如，任意數(shù)量的字符串，Blobs 以及 ArrayBuffers。

第二個參數(shù)：用于指定將要放入Blob中的數(shù)據(jù)的類型(MIME)（后端可以通過枚舉MimeType，獲取對應(yīng)類型：

MimeType mimeType = MimeType.toEnum(file.getContentType());）。

 <script>
 var blob = new Blob(["Hello World!"],{type:"text/plain"});
 </script>

Blob對象的基本屬性：

size ：Blob對象包含的字節(jié)數(shù)。(只讀)

type ： Blob對象包含的數(shù)據(jù)類型MIME，如果類型未知則返回空字符串。

原生對象構(gòu)建Blob

<script type="text/javascript">
window.onload = function() {
 var blob = new Blob(1234);
}
</script>

提示出錯：

Uncaught TypeError: Failed to construct ‘Blob': The 1st argument is neither an array, nor does it have indexed properties.

原因在于Blob構(gòu)造函數(shù)要求第一個參數(shù)必須是數(shù)組，而這里第一個參數(shù)既不是一個數(shù)組，也沒有可索引的屬性。既然這里提到了對象的可索引屬性，讓我聯(lián)想到了類數(shù)組的概念，而Arguments就是一個很好的例子。來試一試：

<script type="text/javascript">
function testArgumentsBlob() {
 var blob = new Blob(arguments);
 console.log(blob.size);//3
 console.log(blob.type);//""
}
window.onload = function() {
 testArgumentsBlob(1, 2, 3);
}
</script>

可以看到即使是類數(shù)組對象，而數(shù)組元素類型是Number也能得出正確的結(jié)論，猜想大概是由于構(gòu)造函數(shù)內(nèi)部把Number轉(zhuǎn)化為String的緣故吧！

再來試一試其他的參數(shù)類型：

window.onload = function() {
 var arg = {hello: "2016"};
 var blob = new Blob([JSON.stringify(arg, null, "\t")], {type: "application/json"});
 console.log(blob.type);//application/json
 console.log(blob.size);//20
}

blob.type等于application/json沒問題。arg轉(zhuǎn)為字符串后的長度為16加上制表符\t的寬度4個字節(jié)等于20。

Blob對象的基本方法：

大文件分割 (slice() 方法)，slice方法與數(shù)組的slice類似。

Blob.slice([start, [end, [content-type]]])

slice() 方法接受三個參數(shù)，起始偏移量，結(jié)束偏移量，還有可選的 mime 類型。如果 mime 類型，沒有設(shè)置，那么新的 Blob 對象的 mime 類型和父級一樣。

當(dāng)要上傳大文件的時候，此方法非常有用，可以將大文件分割分段，然后各自上傳，因為分割之后的 Blob 對象和原始的是獨立存在的。

不過目前瀏覽器實現(xiàn)此方法還沒有統(tǒng)一，火狐使用的是 mozSlice() ，Chrome 使用的是 webkitSlice() ，其他瀏覽器則正常的方式 slice()

可以寫一個兼容各瀏覽器的方法：

 function sliceBlob(blob, start, end, type) {
 type = type || blob.type;
 if (blob.mozSlice) {
  return blob.mozSlice(start, end, type);
 } else if (blob.webkitSlice) {
  return blob.webkitSlice(start, end type);
 } else {
  throw new Error("This doesn't work!");
 }
 }

利用Blob顯示縮略圖

var input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.multiple = true;
input.style.display = "none";
document.body.appendChild(input);

var fileSelect = document.createElement("a");
fileSelect.href = "#";
fileSelect.appendChild(document.createTextNode("Choose files"));
document.body.appendChild(fileSelect);

var imgList = document.createElement("div");
imgList.innerHTML = "<p>No file Selected!</p>"
document.body.appendChild(imgList);

input.addEventListener("change", function(e) {
var files = this.files;
if(!files.length) {
return;
}
imgList.innerHTML = "";
var list = document.createElement("ul");
imgList.appendChild(list);
for(var i = 0; i < files.length; i++) {
var li = document.createElement("li"); 
list.appendChild(li);

var img = document.createElement("img");
img.src = window.URL.createObjectURL(files[i]);
img.height = 60;
img.width = 60;
img.onload = function() {
window.URL.revokeObjectURL(this.src);
}
li.appendChild(img);
var info = document.createElement("span");
info.innerHTML = files[i].name + ":" + files[i].size + " bytes";
li.appendChild(info);
}
}, false);

fileSelect.addEventListener("click", function(e) {
input.click(); 
e.preventDefault();
}, false);

由于File對象繼承自Blob,所以我們可以很方便的利用File對象加載本地系統(tǒng)圖片文件，并通過createObjectURL生成一個URL并加以顯示。

以上就是js中的Blob對象類型解析的詳細內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來億速云行業(yè)資訊！