關於Blob
Blob接口代表原始二進制數據,通過Blob對象的slice()方法,可以訪問裡面的位元組數據。Blob接口還有兩個屬性:size和type。
1.size屬性
表示Blob對象的位元組長度。Blob對象的二進制數據可藉助FileReader接口讀取。如果Blob對象沒有位元組數,則size屬性為0。
2.type屬性
表示Blob對象的MIME類型,如果是未知類型,則返回一個空字元串。使用type屬性獲取檔案的MIME類型,可以更加精確地確定檔案的類型,可避免因更改檔案的擴展名而造成檔案類型的誤判。
3.slice()方法
使用slice()方法可以實現檔案的切割,並返回一個新的Blob對象。
4.File對象與Blob對象
File對象繼承了Blob對象,所以File對象也可以使用Blob對象的屬性和方法。
SLICE方法
Blob對象具有一個slice方法,用於從Blob對象所代表的原始二進制數據中抽離一部分數據,然後將這些數據創建為一個新的Blob對象,其使用方法如下所示。
var newBlob*blob.slice(start,end,contentType);
Blob對象的slice方法使用三個參數,均為可選參數,如果三個參數均省略時,相當於把一個Blob對象中的原始二進制數據原樣複製到一個新建的Blob對象(即slice方法的返回值)中。
Blob對象的slice方法的第一個參數start的參數值為一個整數值,代表起始複製位置在Blob對象所代表的原始二進制數據中的位置,當start參數值為0時代表從該數據的起始位置(即第一個位元組)開始複製數據;如果start參數值為負數值且Blob對象的size屬性值+start參數值大於等於0,則起始複製位置為Blob對象的size屬性值+start參數值;如果start參數值為負數值且Blob對象的size屬性值+start參數值小於0,則起始複製位置為Blob對象所代表的原始二進制數據的起始位置;如果start參數值為正數值且大於等於Blob對象的size屬性值,則起始複製位置為Blob對象的size屬性值;如果start參數值為正數值且小於Blob對象的size屬性值,則起始複製位置為start參數值。
Blob對象的slice方法的第二個參數end的參數值為一個整數值.代表終了複製位置在Blob對象所代表的原始二迸制數據中的位置,如果不使用該參數,則終了複製位置為Blob對象所代表的原始二進制數據的結束位置;如果end參數值為負數值且Blob對象的size屬性值+end參數值大於等於0,則終了複製位置為Blob對象的size屬性值+end參數值;如果end參數值為負數值且Blob對象的size屬性值+end參數值小於0,則終了複製位置為Blob對象所代表的原始二進制數據的起始位置;如果end參數值為正數值且大於等於Blob對象的size屬性值,則終了複製位置為Blob對象的size屬性值;如果end參數值為正數值且小於Blob對象的size屬性值,則終了複製位置為end參數值j
Blob對象的slice方法的第三個參數為一個字元串值,用於指定新建Blob對象中數據的MIME類型。
創建BLOB
在HTML 5中,可以直接創建一個代表原始二進制數據的Blob對象。創建方法如下:
var blob = new Blob ([blobParts,type]);
當創建一個Blob對象時,可以使用兩個可選參數。如果不使用任何參數,創建的Blob對象的size屬性值(代表Blob對象的位元組長度)為0,代碼示例如下所示。
var blob = new Blob();
Blob構造函式中的第一個參數值為一個數組,其中可以存放任意數量個以下類型的對象,這些對象中所攜帶的數據將被依序追加到Blob對象中。
1.ArrayBuffer對象
2.ArrayBufferView對象
3.Blob對象
4.String對象
在創建Blob對象時使用第一個參數的代碼示例如下:
var blob = new Blobb([“1234”+“5678”]);
var shorts = new Uintl6Atrey(buffer,512,128);
var blobA = new Blob([blob,shorts]);
var bytes = new Uint8Array(buffer,shorts.byteOffset + shorts.byteLength);
vat blobB = new Blob([blob,blobA,bytes]);
vat blobC = new Blob([buffer,blob,blobA,bytes]);
Blob構造函式中的第二個參數值用於指定被創建的Blob對象的type屬性值(代表Blob對象的MIME類型),當不使用該參數值時.默認參數值為空字元串,代表未知類型。
在創建Blob對象時使用第二個參數的代碼示例如下:
var blob = new Blob([“1234” + “5678”],{type:“text/plain”});
//或
var blob = new Blob([“1234”+“5678”],{type:“text/plain;charset=UTF-8”});
傳送BLOB
在HTML 5中,可以通過XML HttpRequest對象的send方法向伺服器傳送Blob對象,因為所有File對象(代表一個檔案)都是一個Blob對象,所以同樣可以通過傳送Blob對象的方法來上傳檔案。
使用XML HttpRequest對象傳送Blob對象,頁面中顯示一個“複製頁面檔案”按鈕與一個進度條控制項(progress元素),用戶單擊“複製頁面檔案”按鈕時腳本程式使用當前頁面中所有代碼(包括樣式代碼與JavaScript代碼)創建一個Blob對象,然後通過將該Blob對象指定為XML HttpRequest對象的send方法的參數值的方法向伺服器端傳送該Blob對象,伺服器端接收到該Blob對象後將其保存為一個檔案,檔案名稱為“副本_”十當前頁面檔案的檔案名稱(包括擴展名,不包括檔案路徑)。在向伺服器端傳送Blob對象的同時,頁面中的進度條控制項中將同步顯示傳送進度。