建構一個Blob物件通常有三種方式：
1、透過Blob物件的建構子來建構。
2、從已有的Blob物件呼叫slice介面切出一個新的Blob物件。
3、canvas API toBlob方法，把目前繪製資訊轉為一個Blob物件。以下只看第一種的實作：
用法：新方法建立Blob 物件（建構子來建構）
var blob = new Blob(array[optional], options[optional]);
建構函數，接受兩個參數
#第一個參數：為一個資料序列，可以是任意格式的值，例如，任意數量的字串，Blobs 以及ArrayBuffers。
第二個參數：用於指定將要放入Blob中的資料的類型(MIME)（後端可以透過列舉MimeType，取得對應類型：
MimeType mimeType = MimeType.toEnum(file.getContentType());）。
<script>
var blob = new Blob(["Hello World!"],{type:"text/plain"});
</script>Blob物件的基本屬性：
size ：Blob物件包含的位元組數。(唯讀)
type ： Blob物件包含的資料型別MIME，如果型別則傳回空字串。
原生物件建構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建構子要求第一個參數必須是數組，而這裡第一個參數既不是一個數組，也沒有可索引的屬性。既然這裡提到了物件的可索引屬性，讓我聯想到了類別數組的概念，而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>可以看到即使是類別數組對象，而數組元素類型是Number也能得出正確的結論，猜想大概是由於構造函數內部把Number轉換為String的緣故吧！
再來試一試其他的參數類型：
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轉為字串後的長度為16加上製表符\t的寬度4個位元組等於20。
Blob物件的基本方法：
大檔案分割(slice() 方法)，slice方法與陣列的slice類似。
Blob.slice([start, [end, [content-type]]])
slice() 方法接受三個參數，起始偏移量，結束偏移量，還有可選的mime 類型。如果mime 類型，沒有設置，那麼新的Blob 物件的mime 類型和父級一樣。
#當要上傳大檔案的時候，此方法非常有用，可以將大檔案分割分段，然後各自上傳，因為分割之後的Blob 物件和原始的是獨立存在的。
不過目前瀏覽器實作此方法還沒有統一，火狐使用的是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物件載入本機系統圖片文件，並透過createObjectURL產生一個URL並加以顯示。
推薦教學：js教學
#以上是關於js中的Blob物件類型的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
