php接收arraybuffer,ArrayBuffer / Blob 对象

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

```

//

//

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 代码如下

//

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);

};

}

```