HTML5-FileReader的使用

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

1.创建文件读取对象

var reader = new FileReader();

2.读取文件的方法

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

3.实例

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

读取文本文件并显示在页面上

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;
        }
    }
}

读取图片并显示在页面上

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], 'base64');
        //读取文件是异步操作，需要事件监听才能查看
        reader.onload = function() {
            //文件已读取完毕
            showBox.querySelector('img').src = reader.result;
        }
    }
}

4.事件名称

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

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