[TOC] > [網道](https://wangdoc.com/javascript/bom/arraybuffer.html) ## ArrayBuffer 對象 操作內存 ES6 新增 ``` var buffer = new ArrayBuffer(8); buffer.byteLength // 8 ``` ## Blob 對象 操作二進制對象 - 一個圖片文件的內容就可以通過 Blob 對象讀寫 - 它通常用來讀寫文件 - 它與 ArrayBuffer 的區別在于，它用于操作二進制文件，而 ArrayBuffer 用于操作內存 語法 ``` new Blob(array [, options]) array 數組，成員是字符串或二進制對象 表示新生成的Blob實例對象的內容 options 可選 type 數據的 MIME 類型 ``` 實例 ``` var htmlFragment = ['<a id="a"><b id="b">hey!</b></a>']; var myBlob = new Blob(htmlFragment, {type : 'text/html'}); //or var obj = { hello: 'world' }; var blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'}); ``` ### 實例 #### 創建文件并下載 ``` // html <a href="#" onclick="downFile(this)">asdad</a> // js function downFile(a) { let file = new File(['hello world'], 'test.txt', {type: 'text/plain'}); a.download="asd.txt" a.href= URL.createObjectURL(file) } ``` #### 獲取文件信息 函數觸發 ``` // HTML 代碼如下 // <input type="file" accept="image/*" multiple onchange="fileinfo(this.files)"/> function fileinfo(files) { for (var i = 0; i < files.length; i++) { var f = files[i]; console.log( f.name, // 文件名，不含路徑 f.size, // 文件大小，Blob 實例屬性 f.type, // 文件類型，Blob 實例屬性 f.lastModifiedDate // 文件的最后修改時間 ); } } ``` 監聽 ``` <input type="file" multiple="multiple" > document.querySelectorAll('input').forEach(function (t) { t.addEventListener('change',function (e) { console.log(this.files); //文件信息數組 }) }) ``` #### AJAX下載文件 AJAX 請求時，如果指定`responseType`屬性為`blob`，下載下來的就是一個 Blob 對象。 ``` function getBlob(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'blob'; xhr.onload = function () { callback(xhr.response); } xhr.send(null); } ``` #### 生成 URL(拖拉預覽圖片) - 瀏覽器允許使用URL.createObjectURL()方法，針對 Blob 對象生成一個臨時 URL，以便于某些 API 使用 - 這個 URL 以`blob://`開頭，表明對應一個 Blob 對象，協議頭后面是一個識別符，用來唯一對應內存里面的 Blob 對象 ``` <div class="dropzone"></div> 圖片預覽: <div id="view"></div> //js document.addEventListener('dragover', function (event) { // 防止拖拉效果被重置，允許被拖拉的節點放入目標節點 event.preventDefault(); }, false); document.addEventListener('drop', function( event ) { // 防止事件默認行為（比如某些元素節點上可以打開鏈接）， event.preventDefault(); if (event.target.className == "dropzone") { event.target.style.background = ''; var files = event.dataTransfer.files; for (var i = 0; i < files.length; i++) { var type = files[i].type; if (type.substring(0, 6) !== 'image/') continue; var img = document.createElement('img'); img.src = URL.createObjectURL(files[i]); img.onload = function () { this.width = 100; document.querySelector('#view').appendChild(this) URL.revokeObjectURL(this.src); } } } }); ``` #### 讀取文件 取得 Blob 對象以后，可以通過FileReader對象，讀取 Blob 對象的內容，即文件內容 * `FileReader.readAsText()`：返回文本，需要指定文本編碼，默認為 UTF-8。 * `FileReader.readAsArrayBuffer()`：返回 ArrayBuffer 對象。 * `FileReader.readAsDataURL()`：返回 Data URL。 * `FileReader.readAsBinaryString()`：返回原始的二進制字符串 `FileReader.readAsText()` 用于讀取文本文件 ``` // <input type=’file' onchange='readfile(this.files[0])'></input> // <pre id='output'></pre> function readfile(f) { var reader = new FileReader(); reader.readAsText(f); reader.onload = function () { var text = reader.result; var out = document.getElementById('output'); out.innerHTML = ''; out.appendChild(document.createTextNode(text)); } reader.onerror = function(e) { console.log('Error', e); }; } ``` `FileReader.readAsArrayBuffer()`方法的例子，用于讀取二進制文件 ``` // HTML 代碼如下 // <input type="file" onchange="typefile(this.files[0])"></input> function typefile(file) { // 文件開頭的四個字節，生成一個 Blob 對象 var slice = file.slice(0, 4); var reader = new FileReader(); // 讀取這四個字節 reader.readAsArrayBuffer(slice); reader.onload = function (e) { var buffer = reader.result; // 將這四個字節的內容，視作一個32位整數 var view = new DataView(buffer); var magic = view.getUint32(0, false); // 根據文件的前四個字節，判斷它的類型 switch(magic) { case 0x89504E47: file.verified_type = 'image/png'; break; case 0x47494638: file.verified_type = 'image/gif'; break; case 0x25504446: file.verified_type = 'application/pdf'; break; case 0x504b0304: file.verified_type = 'application/zip'; break; } console.log(file.name, file.verified_type); }; } ```