用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
1、FileReader接口的方法
FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
| 方法名: | 参数: | 描述: |
| readAsDataURL | file | 将文件读取为DataURL(一般读取图片) |
| readAsText | ile,[encoding] | 将文件读取为文本 |
| readAsBinaryString | file | 将文件读取为二进制编码 |
| abort | (none) | 终端读取操作 |
2、FileReader接口事件
| 事件: | 描述: |
| onabort | 中断 |
| onerror | 出错 |
| onloadstart | 开始 |
| onprogress | 正在读取 |
| onload | 成功读取 |
| onloadend | 读取完成，无论成功失败 |
3、FileReader接口的使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id="file">
<div id="out"></div>
<img src="" alt="" id="img">
<script>
var file = document.getElementById('file');
var out = document.getElementById('out');//文件展示的1地方
var img = document.getElementById('img');//图片显示的地方
file.onchange = function(event){ //监听文件的改变
var file = event.target.files[0]; //获取到文件的所有信息
console.log(file)
var type = 'defautl';
var reader = new FileReader(); //new一个文件读取的对象（首先要判断你的浏览器是否支持这个方法）
//判断文件类型
if(/image/.test(file.type)){ //判断文件的类型
type = 'image' //图片
reader.readAsDataURL(file);
}else{
type = 'text'; //其他非图片文件
reader.readAsText(file);
}
reader.onload = function() { //成功的回调
var html = '';
switch(type){
case "image"://图片的显示
img.src = this.result;
break;
case "text"://文件的显示
html = this.result;
out.innerHTML = html;
break;
}
}
}
</script>
</body>
</html>
4、FileReader效果展示
