JavaScript使用FileReader读取文件

FileReader是前端进行文件处理的一个重要的web api，特别是在对图片的处理上。

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

示例代码

html

<input id="file" type="file" οnchange="fileChange" />
进度：<span id="progress"></span>
<div id="box">
</div>

用input标签获取文件，span获取文件的进度条，div来查看获取的数据源。

//获取页面元素对象
var file = document.getElementById('file');
var output = document.getElementById('box');
var progress = document.getElementById('progress');
//onchange事件
file.onchange = function (e) {
    console.log(e);
    var files = e.target.files;
    var file0 = files[0];
    console.log(file0.size,file0.name,file0.type);
    //fileReader对象
    var fileReader = new FileReader();
    var type = 'default';
    //判断文件类型
    if(/image/.test(file0.type)){
        fileReader.readAsDataURL(file0);
        type = 'image';
    } else {
        fileReader.readAsText(file0,'utf-8');
        type = 'text';
    }
    //文件加载出错
    fileReader.onerror = function () {
        output.innerHTML = 'Could not read file, error code is ' + fileReader.error.code;
    };
    //加载成功后
   fileReader.onload = function () {
        console.log('onload')
        var html = '';
        switch (type) {
            case 'image':
               html = '<img src=\"' + fileReader.result +'\">';
               break;
            case 'text':
                html = fileReader.result;
                break;
        }
        output.innerHTML = html;
    };
    //进度条进度
    fileReader.onprogress = function (event) {
        if(event.lengthComputable) {
            progress.innerHTML = event.loaded + '/' + event.total;
        }
    }
}

示例说明

一、获取页面file的input，然后对file进行onchange监控。

var file = document.getELementById('file');
file.onchange = function(e){
    var files = e.target.files;
    //...
}

e.target.files获取文件数组。通过下标可以获取文件对象。

获取到文件对象的属性有：name、size、type、lastModifiedDate。

二、使用FileReader类读取文件

FileReader读取文件方法如下：

readAsText(file, encoding)：以纯文本形式读取文件，读取到的文本保存在result属性中。第二个参数代表编码格式。
readAsDataUrl(file)：读取文件并且将文件以数据URI的形式保存在result属性中。
readAsBinaryString(file)：读取文件并且把文件以字符串保存在result属性中。
readAsArrayBuffer(file)：读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。

三、FileReader事件监控

FileReader类提供了三个事件：progress、error、load。我们可以对这三个事件进行监控。

progress：每隔50ms左右，会触发一次progress事件。
error：在无法读取到文件信息的条件下触发。
load：在成功加载后就会触发。