HTML5-FileReader

1.基本说明

(1)FileReader可以主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

(2)用途：在input:file文件域中，对于选中的文件，一般只能获取文件名，无法得知具体的路径，因此无法访问被选中的文件，传送门：https://www.cnblogs.com/OrochiZ-/p/11565264.html
而FileReader可以将选中的文件内容读入内存，通过一系列异步接口，从而达到访问本地文件的目的。

2.创建文件读取对象

var reader = new FileReader();

3.读取文件的方法

readAsText():读取文本文件（css,txt,html）,返回文本字符串
readAsBinaryString():读取任意类型文件，返回二进制字符串
redaAsDataURL():异步读取文件内容，结果用data:url的字符串形式表示
readAsArrayBuffer(file)：将文件读取为arraybuffer

注意：该函数没有返回值,读取结果存放于result属性中，且文件读取是异步操作，想要获得读取结果要使用事件监听

4.事件监听

onabort 该事件在读取操作被中断时触发。
onerror 该事件在读取操作发生错误时触发
onload 当读取操作成功完成时调用
onloadend 该事件在读取操作结束时（要么成功，要么失败）触发。
onloadstart 该事件在读取操作开始时触发
onprogress 在读取数据过程中持续触发

reader.onloadstart = function() {
    console.log('文件开始读取');
}
reader.onprogress = function() {
    console.log('文件读取中');
}
reader.onload = function() {
    console.log('文件读取成功');
}

5.实例

<form action="">
    <!-- 可添加accept属性设置文件类型 -->
    <input type="file" name="file" id="file">
</form>
<div id="showBox">
    <p></p>
    <img src="" alt="" width="400px">
</div>

(1)读取文件域选中的文本文件并显示在页面上

window.onload = function() {
    var myFile = document.getElementById('file');
    var showBox = document.getElementById('showBox');
    myFile.onchange = function() {
        var reader = new FileReader();
        //读取txt文件
        //myFile.files[0]为选中的文件
        reader.readAsText(myFile.files[0], 'utf-8');
        //该函数没有返回值，读取结果存放于reader.result
        //读取文件是异步操作，需要调用其他方法才能正常查看
        reader.onload = function() {
            //将读取的结果存展示在页面中
            showBox.querySelector('p').innerHTML = reader.result;
        }
    }
}

(2)读取图片并显示在页面上

window.onload = function() {
    var myFile = document.getElementById('file');
    var showBox = document.getElementById('showBox');
    myFile.onchange = function() {
        var reader = new FileReader();
        //该函数没有返回值，读取结果存放于reader.result
        reader.readAsDataURL(myFile.files[0]);
        //读取文件是异步操作，需要事件监听才能查看
        reader.onload = function() {
            //文件已读取完毕 将结果赋值给src元素
            showBox.querySelector('img').src = reader.result;
        }
    }
}