什么是Blob?
Blob 是什么? 這里說的是一種Javascript的對象類型。
oracle 中也有類似的欄位類型。
在 [JS進階] HTML5 之文件操作(file)
這一篇中用到了File對象,而實際上 file 對象只是 blob 對象的一個更具體的版本,blob 存儲着大量的二進制數據,並且 blob 的 size 和 type 屬性,都會被 file 對象所繼承。
所以, 在大多數情況下,blob 對象和 file 對象可以用在同一個地方,例如,可以使用 FileReader 接口從 blob 讀取數據,也可以使用 URL.createObjectURL() 從 blob 創建一個新的 URL 對象。
如何創建Blob
1. 使用舊方法創建 Blob 對象。
舊的方法使用 BlobBuilder 來創建一個Blob 實例,並且使用一個 append() 方法,將字符串(或者 ArrayBuffer 或者 Blob,此處用 string 舉例)插入,一旦數據插入成功,就可以使用 getBlob() 方法設置一個 mime 。
<script>
var builder = new BolbBuilder();
builder.append("Hello World!");
var blob = builder.getBlob("text/plain");
</script>
2. 新方法創建Blob 對象
在新的方法中直接可以通過 Blob() 的構造函數來創建了。
構造函數,接受兩個參數,第一個為一個數據序列,可以是任意格式的值,例如,任意數量的字符串,Blobs 以及 ArrayBuffers。第二個參數,是一個包含了兩個屬性的對象,其兩個屬性分別是:
type -- MIME 的類型。
endings -- 決定 append() 的數據格式,(數據中的 \n 如何被轉換)可以取值為 "transparent" 或者 "native"(t* 的話不變,n* 的話按操作系統轉換;t* 為默認) 。
<script>
var blob = new Blob(["Hello World!"],{type:"text/plain;charset=utf-8"}); // type:可以設置別的文件類型
</script>
Blob的應用
1. 大文件分割 (slice() 方法)
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!");
}
}