[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); }; } ```