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对象获取：

1. <input type="file">的元素
2. 拖拽操作的DataTransfer对象
3. 通过在一个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对象传入。