- 创建FileReader对象；
var Reader = new FileReader - 调用FileReader对象的方法：
FileReader的实例方法有4个，3个是用于读取文件，另一个用于中断读取，需要注意：无论读取是否成功或者失败，方法不会返回读取结果，结果储存在result属性中。
- abort()： 中断读取操作，在返回时，readyState的属性值为DONE；
- readAsBinaryString(file)： 开始读取file对象中的内容，当读取操作完成时，readyState属性的值会为DONE，如果设置了onloadend事件，则调用之，同时，result属性中讲包括所读取的原始二进制数据；
- readAsDataURL(file)： 开始读取file对象中的内容，当读取操作完成时，readyState属性的值会为DONE，如果设置了onloadend事件，则调用之，同时，result属性中将包含一个data：URL格式的字符串以表示所读取的内容；
- readAaText(file, encoding) : 开始读取file对象中的内容，当读取操作完成时，readyState属性的值会为DONE，如果设置了onloadend事件，则调用之，同时，result属性将包含一个字符串以表示所取得文件内容；有2个参数，第二个可选，一个字符串，表示了返回数据所使用的的编码，如果不指定，默认UTF-8。
- 事件处理；
- onabort: 读取操作被终止时调用。
- onerror: 当读取操作发生错误时调用；
- onload: 读取操作成功完成时调用；
- onloadend: 当读取操作完成时调用，不管是成功还是失败，该处理程序在onload或者onerror之后调用;
- onloadstart : 当读取操作将要开始之前调用；
- progrees： 在读取数据过程中周期性调用；
实例代码：
<!--html-->
<div id="test-image-preview"></div>
<input type="file" name="file" id="test-image-file">
<div id="test-image-info"></div>
//javaScript
var fileInput = document.getElementById("test-image-file"),
info = document.getElementById("test-image-info"),
preview = document.getElementById("test-image-preview");
//添加change事件，元素发生改变从发
fileInput.addEventListener("change", function() {
// 添加背景图片
preview.style.backgroundImage = "";
//检查文件是否存在
if (!fileInput.value) {
info.innerHTML = "没有文件"
return;
}
//获取file引用
var file = fileInput.files[0];
console.log(file); //返回file对象
info.innerHTML = "文件" + file.name + "<br>" +//返回当前文件的名称
"大小" + file.size + "<br>" + //返回当前文件的大小
"修改" +file.lastModifiedDate; //返回当前file对象引用的文件最后修改事件
//判断文件是否是图片类型
if (file.type !== "image/jpeg" && file.type !=="image/png" && file.image !== image/gif) {
alert("不是图片文件");
return;
}
//创建一个reader读取文件
var reader = new FileReader() // FileReader()构造函数用于读取文件
reader.onload = function(e) {//onload事件，在文件读取成功时触发
var data = e.target.result;// 当前事件触发返回的值，也就是说，是onload事件触发后的值
preview.style.backgroundImage = "url(" + data + ")";
}
// DataURL的形式读取文件;
reader.readAsDataURL(file);
});
代码演示了通过FIleReader方法读取文件内容。
