1、File API
File对象是一种特定类型的Blob。FileReader, URL.createObjectURL(), createImageBitmap(), 以及XMLHttpRequest.send() 都接受Blobs和Files。
通过change事件，读取到files集合就可以知道每个文件的信息。
File对象
{
lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
name: "profile.pdf",
size: 135568,
type: "application/pdf"
}
需要注意的是，type是根据文件扩展名来判断的，所以并不是很可靠。根据上面File对象的信息其实就可以实现一些常用的功能了，比如限制文件上传的大小，初步的限制文件上传的类型(当然也可以通过input元素的accept属性来实现，但是最终的类型验证还是需要在服务器端实现)。
File对象一般通过以下途径返回的FileList对象获取：
- <input type="file">的元素
- 拖拽操作的DataTransfer对象
- 通过在一个HTMLCanvasElement上调用mozGetAsFile() API
2、FileReader
FileReader对象让web应用程序可以异步地读取存储在用户电脑上的文件(或者原始数据缓冲区)的内容。在JavaScript中，FileReaderd对象通过传入两种相应的对象(File和Blob)来进行数据的读取，而且这个方法在Web Workers中也能使用。
FileReader 包括四个异步读取文件的选项：
FileReader.readAsBinaryString(Blob|File) - 返回值的result 属性将包含二进制字符串形式的file/blob 数据。每个字节均由一个 [0..255] 范围内的整数表示。
FileReader.readAsText(Blob|File, opt_encoding) - 返回值的result 属性将包含文本字符串形式的 file/blob 数据。该字符串在默认情况下采用“UTF-8”编码。使用可选编码参数可指定其他格式。
FileReader.readAsDataURL(Blob|File)- readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
FileReader.readAsArrayBuffer(Blob|File) - 返回值的result 属性将包含 ArrayBuffer 对象形式的 file/blob 数据。
FileReader 对象调用其中某一种读取方法后，可使用 onloadstart、onprogress、onload、onabort、onerror 和 onloadend 跟踪其进度。
2.1 事件:
progress 是否又读取了新数据
每过50ms，就会触发一次onprogress事件，通过事件对象可以获得与XHR的progress事件相同的信息: lengthComputable、loaded、 total。使用loaded / total 可以判断当前进度。
reader.onprogress = function(e) {
if (e.lengthComputable){
progress.innerHTML = e.loaded / e.total
}
}
error 是否出错
load 是否读完
abort 中断读取过程
loadend 结束（读完了、出错了、中断了）
3 读取部分内容
可以节省时间，特定的情况下，比如只想要文件的开头。
File对象支持slice方法，slice方法支持两个参数，起始字节 要读取的字节数。该方法返回一个Blob实例，Blob是File类型的父类型。
4 对象URL
不必将文件内容读取到JS中，而直接使用文件内容。
引用保存在File或Blob中的数据URL。
使用window.URL.crateObjectURL()方法，并传入File或Blob对象。
直接把对象URL放入img标签中，img标签会找到相应的内存地址，读取数据将图片显示在页面上。
不需要相应的数据时，最好释放内存。因为有代码引用对象URL，内存就不会释放，需要手动释放内存。使用window.URL.revokeObjectURL()。
5 读取拖放的文件
拖动文件到浏览器中时，获取文件信息。使用event.dataTransfer.files读取被放置的文件
拖拽事件：
drag(开始拖动，持续事件)
dragend(释放鼠标或者按下ESC，结束拖动)
dragenter(进入有效的拖拽区域时)
dragexit(当一个元素不再是拖动操作的直接选择目标时)
dragleave(离开有效的拖拽区域时)
dragover(悬停在有效的拖拽区域内时，持续事件)
dragstart(开始拖动)
drop(目标放置到有效的拖拽区域时)
6 使用XHR上传文件
创建一个FormData对象，将File对象传入。
