[WebAPIs] Blob, File 和 FileReader
keywords: file
, blob
, ArrayBuffer
, FIleList
, FileReader
- Blob @ MDN - Web APIs
- FileReader @ MDN - Web APIs
- File 物件,FileList 物件,FileReader 物件 @ 阮一峰
關聯文章:
- [TypedArray, ArrayBuffer, DataView](/Users/pjchen/Projects/Notes/source/_posts/JavaScript/[JS] TypedArray, ArrayBuffer 和 DataView.md)
- [檔案上傳(Input File) and File Upload](/Users/pjchen/Projects/Notes/source/_posts/WebAPIs/[WEB] 檔案上傳 Input File and File Upload.md)
- [Blob and File API](/Users/pjchen/Projects/Notes/source/_posts/WebAPIs/[WEB] Blob and File API.md)
Blob 概念
keywords: new Blob()
, Blob.prototype.size
, Blob.prototype.type
, Blob.prototype.slice()
Blob 是 Binary Large Object 的縮寫,表示的是二進位檔案的資料內容,透過 Blob,JavaScript 才能讀寫二進位資料的檔案。和 ArrayBuffer 不同的地方是,ArrayBuffer 是操作記憶體,而 Blob 是用來操作二進位檔案(但尚未參照到實體檔案上)。
Blob 物件指的是能夠用來表徵檔案,帶有許多資料位元的 chunks,但它實際上並沒有參照到真正的檔案。Blob 物件和檔案一樣,它有自己的檔案大小和 MIME 格式,它會根據瀏覽器或 blob size 儲存在記憶體或檔案系統中。使用上,它就和使用檔案一樣。
Blob 的內容可以轉換成 ArrayBuffer ,因此可以輕易的把它存成二元資料
- 想從 non-blob 物件或資料建立一個 Blob 可以使用
Blob()
建構式。 - 想從已經包含 blob 的資料中建立 Blob 可以使用
slice()
方法。 - 想從使用者系統中取得檔案的
Blob
物件,需要參考File
文件。
建立 Blob 物件
透過 Blob()
建構式,可以從其他物件建立出 Blob 物件,Blob 物件會包含 type
和 size
兩者屬性可以使用:
// new Blob(array [, options])
// - array 是字元串或二進位物件(ArrayBuffer, ArrayBufferView, Blob, DOMString)
// - options 用來指定 MIME Type
var htmlFragment = '<div><h1>Hello Blob</h1></div>';
var htmlBlob = new Blob([htmlFragment], { type: 'text/html' });
// 常用的檔案格式
var jsonData = JSON.stringify({ hello: 'world' }, null, 2);
new Blob([jsonData], { type: 'application/json' });
var cssFormat = 'body { background-color: yellow; }';
new Blob([cssFormat], { type: 'text/css' });
array 可以是由
ArrayBuffer
,ArrayBufferView
,Blob
,DOMString
這些物件組成的陣列。