用FileReader对象从本地读取文件
FileReader简介
一、属性（以下属性均为只读）
| 属性 | 介绍 |
| error | 在读取文件时发生的错误 |
| readyState |
FileReader对象当前的状态， 有三个： 0,1,2， 分别对应的常量名为EMPTY、LOADING、DONE， 分别表示数据还没有开始读取，正在读取，读取成功 |
| result |
读取完成之后的内容 只有在读取完成之后有效 格式由用哪个函数读取决定 例如： 用readAsBinaryString函数，读取完之后就是二进制字符串， 具体参见方法 |
二、方法
| 方法 | 描述 | 参数 |
| abort() | 中止读取操作 | 无 |
| readAsArrayBufffer() |
读取File或Blob对象，并将读取完成的内容放在result属性中，readState 置为2，如果定义了事件处理函数onloadend,会在执行完之后调用。 这四个函数的不同处就在于在result中生成的内容格式不一样。 readAsArrayBufffer执行完之后会在result属性中生成一个ArrayBuffer格式的内容； readAsBinaryString生成的是所读取文件的原始二进制数据； readAsDataUrl将包含一个data readAsText是一个字符串的读取结果。 |
将要读取的File或Blob对象 |
| readAsBinaryString() | 同上 | |
| readAsDataURL() | 同上 | |
| readAsText() |
arguments[0]:将要读取的File或Blob对象 arguments[1]: 可选一个字符串,表示了返回数据所使用的编码.如果不指定,默认为UTF-8. |
DataURL是一种格式，用base64将内容加密，然后将加密后的内容放在URL中，一般格式小的图片，字体图标或者其他体积小的文件可以用这种格式展现，可以http减少请求次数。
三、事件处理函数
| 方法 | 描述 | 事件对象 |
|
onabort |
当读取操作被中止时调用 |
事件对象中有是否冒泡， 事件类型 已读取量 读取总量等属性， 可自行打印查看 |
| onerror | 当读取操作发生错误时调用 | |
| onload | 当读取操作完成且成功时调用 | |
| onloadend | 当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用 |
|
| onloadstart | 当读取操作将要开始之前调用 | |
| onprogress | 在读取数据过程中周期性调用(例如设置加载进度条时会使用) |
四、浏览器兼容
谷歌 7
IE 10
火狐 3.6
欧朋和苹果未实现
五、应用场景
按指定格式读取本地文件到脚本对象中，然后进行文件上传前的展示，判断
我是什么时候用到的呢，就是在图片上传之前要将需要上传的图片展示给用户，并需要判断图片宽高分别是多少像素等
这时候就要new一个FileReader对象，然后将inputElement.files[0]传入readAsDataURL方法，获取地址，将FileReader对象的result属性给指定Image对象的src，就可以在本地显示图片了
这时候获取图片宽高的话应该不是图片原始的值,要想解决这个问题还需要new一个image对象，然后将FileReader对象的result属性赋值给这个new出来的对象的src属性，再获取image对象的 naturalWidth,naturalHeight就可以了
六、参考链接
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
