HTML5 FileReader

1.基本说明

• FileReader可以主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件
• 本地文件一般通过文件域进行选择，选中后再使用FileReader进行访问

2.创建文件读取对象

var reader = new FileReader()

3.读取文件的方法

• 以异步的形式读取文件，不同的读取方法返回不同的数据格式
• 读取文件是异步操作，想要获得读取结果要使用事件监听

方法名	说明
readAsText()	用于读取文本文件,返回文本字符串
readAsBinaryString()	读取任意类型文件，返回二进制字符串
redaAsDataURL()	读取文件内容，结果用data:url的字符串形式表示
readAsArrayBuffer()	读取文件，返回格式为为arraybuffer

4.读取时的事件监听

• 执行读取的方法后，通过事件监听获取读取结果
• 读取成功后，在onload回调中，通过实例化对象的result属性获取返回结果

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

• 实例代码：

var reader = new FileReader()
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>

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

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