js 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 。

 

[javascript]  view plain  copy
 
  1. <script>  
  2.   var builder = new BolbBuilder();  
  3.   builder.append("Hello World!");  
  4.   var blob = builder.getBlob("text/plain");  
  5. </script>  

 

 

2. 新方法創建Blob 對象

在新的方法中直接可以通過 Blob() 的構造函數來創建了。
構造函數,接受兩個參數,第一個為一個數據序列,可以是任意格式的值,例如,任意數量的字符串,Blobs 以及 ArrayBuffers。第二個參數,是一個包含了兩個屬性的對象,其兩個屬性分別是:

type -- MIME 的類型。

endings -- 決定 append() 的數據格式,(數據中的 \n 如何被轉換)可以取值為 "transparent" 或者 "native"(t* 的話不變,n* 的話按操作系統轉換;t* 為默認) 。

[javascript]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. <script>  
  2.   var blob = new Blob(["Hello World!"],{type:"text/plain"});  
  3. </script>  

 

 

Blob的應用

1. 大文件分割 (slice() 方法)

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

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

 

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

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

 

[javascript]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. function sliceBlob(blob, start, end, type) {  
  2.   type = type || blob.type;  
  3.   if (blob.mozSlice) {  
  4.       return blob.mozSlice(start, end, type);  
  5.   } else if (blob.webkitSlice) {  
  6.       return blob.webkitSlice(start, end type);  
  7.   } else {  
  8.       throw new Error("This doesn't work!");  
  9.   }  
  10. }  


2.  在Chrome 中指定下載的文件名;

 

具體可以參考:

 

Web 端 js 導出csv文件(使用a標簽)

 

 

 

瀏覽器支持


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM