前端将二进制数据流转为文件_详解JavaScript操作文件和二进制数据

在很长的一段时间内 JavaScript 是不能操作二进制数据的。同样的为了安全性，直接操作文件也是不被支持的。但是随着 ECMAScript 5 的出现，引入了 Blob 对象，允许直接操作二进制数据。

当然在?ECMAScript 5 之前也可以操作二进制数据，但是速度慢还容易出错。charCodeAt()方法，支持一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理。今天我们要介绍的是使用 Blob 对象，直接操作二进制数据。

Blob 对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的 API，用来操作文件。

File 对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；

FileList 对象：File 对象的网页表单接口；

FileReader 对象：负责将二进制数据读入内存内容；

URL 对象：用于对二进制数据生成 URL。

Blob 对象

Blob(Binary Large Object)对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的 API(比如 File 对象)，都是建立在 Blob 对象基础上的，继承了它的属性和方法。

生成 Blob 对象有两种方法：

一种是使用 Blob 构造函数

另一种是对现有的 Blob 对象使用 slice 方法切出一部分。

Blob 构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型，这两个参数都不是必需的。

var htmlParts = ["hey!"];

var myBlob = new Blob(htmlParts, { "type" : "text//xml" });

下面是一个利用 Blob 对象，生成可下载文件的例子。

var blob = new Blob(["Hello World"]);

var a = document.createElement("a");

a.href = window.URL.createObjectURL(blob);

a.download = "hello-world.txt";

a.textContent = "Download Hello World!";

body.appendChild(a);

上面的代码生成了一个超级链接，点击后提示下载文本文件 hello-world.txt，文件内容为“Hello World”。

Blob 对象的 slice 方法，将二进制数据按照字节分块，返回一个新的 Blob 对象。

var newBlob = oldBlob.slice(startingByte, endindByte);

下面是一个使用 XMLHttpRequest 对象，将大文件分割上传的例子。

function upload(blobOrFile)