ArrayBuffer / Blob 对象

最后更新于：2022-04-02 03:25:24

[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 = ['hey!']; var myBlob = new Blob(htmlFragment, {type : 'text/html'}); //or var obj = { hello: 'world' }; var blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'}); ``` ### 实例 #### 创建文件并下载 ``` // html asdad // 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 代码如下 // 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 // 文件的最后修改时间 ); } } ``` 监听 ``` 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 对象 ```

图片预览:

//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()` 用于读取文本文件 ``` // //