html5 操作文件FileReader方法

1. 创建FileReader对象；
   var Reader = new FileReader
2. 调用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。

3. 事件处理；

• 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方法读取文件内容。