html5 二进制文件操作基础
Blob、ArrayBuffer、File、fileReader、formData这些名词总是经常看到，
这些名词里，Blob、ArrayBuffer、File可以归为一类，它们都是数据；而fileReader算是一种工具，用来读取数据；formData可以看做是一个应用数据的场景。
arraybuffer与blob的区别
ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。
Blob (binary large object)，他表示一个不可变、原始数据的类文件对象，
blob类型只有slice方法，用于返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。
对比发现，ArrayBuffer的数据，是可以按照字节去操作的，而Blob的只能作为一个整的对象去处理。
所以说，ArrayBuffer相比Blob更接近真实的二进制，更底层。
Blob 与 ArrayBuffer 的关系
- 相同点： Blob和ArrayBuffer都是二进制的容器；
- ArrayBuffer：ArrayBuffer更底层，就是一段纯粹的内存上的二进制数据，我们可以对其任何一个字节进行单独的修改，也可以根据我们的需要以我们指定的形式读取指定范围的数据
- Blob：Blob就是将一段二进制数据做了一个封装，我们拿到的就是一个整体，可以看到它的整体属性大小、类型；可以对其分割，但不能了解到它的细节
- 联系：Blob可以接受一个ArrayBuffer作为参数生成一个Blob对象，此行为就相当于对ArrayBuffer数据做一个封装，之后就是以整体的形式展现了
- 应用上的区别：由于ArrayBuffer和Blob的特性，Blo作为一个整体文件，适合用于传输；而只有需要关注细节（比如要修改某一段数据时），才需要用到ArrayBuffer
arraybuffer与blob 相互转换
// arraybuffer转blob很方便，作为参数传入就行了。 var buffer = new ArrayBuffer(16) var blob = new Blob([buffer])
此处需要借助fileReader对象: var blob = new Blob([1,2,3,4,5]) var reader = new FileReader() reader.onload = function() { console.log(this.result) } reader.readAsArrayBuffer(blob) // 控制台输出的则是ArrayBuffer的数据了。
Blob就是一个只读的二进制文件，
我们可以知道它的
文件大小（size），
文件类型（type），
并可以对其作出分割（slice）。
------------------------------------------------------------
构建一个Blob对象通常有三种方式：
通过Blob对象的构造函数来构建。
从已有的Blob对象调用slice接口切出一个新的Blob对象。
canvas API toBlob方法，把当前绘制信息转为一个Blob对象。下面只看第一种的实现：
File
概念理解
- File 根据名字很容易理解，就是纯粹的文件。通常，表示我们使用
<input type="file">选择的 FileList 对象，或者是使用拖拽操作搞出的 DataTransfer 对象。 - File 对象也是二进制对象，从属于 Blob；也就是说 File 是 Blob 里的一个小类，Blob 的属性和方法都可以用于 File，而 File 自己也有自己特有的属性和方法。对于 Blob 和 File 都有的属性，推荐使用 Blob 的属性
使用
这里就不做过多介绍了，可以直接参考MDN上的介绍
小结
File 就是 Blob里面的一个小类，继承 Blob 的方法和属性，拥有自己特有的属性。通常表示 <input type="file"> 里的 FileList 对象
FileReader
前面提到Blob对象时一个只读对象，但它是一个二进制对象，如果直接读取就只能拿到一堆01数据，因此需要借助专门的工具来读取，这个工具就是 FileReader。
通过 FileReader 可以将 Blob 读取为不同的格式
FormData
准确来说，FormData其实与上述内容关系就不大了。它是XMLHttpRequest Level 2添加的一个新的接口，我们可以通过JavaScript用一些键值对来模拟一系列表单控件。FormData的最大优点就是，比起普通的ajax, 使用FormData我们可以异步上传一个二进制文件，而这个二进制文件，就是我们上面讲的Blob对象。
