FileReader

原文：https://blog.csdn.net/mapbar_front/article/details/78632928 

FileReader是前端进行文件处理的一个重要的Api，特别是在对图片的处理上，如果你想知道图片的处理原理，你就永远不可能绕过它。

文件处理是一系列的流程，每一步我们都需要知道，自己能做什么，自己做了什么。

第一步，获取文件
前端中，获取文件必须使用input标签。

<input id='file' type='file' />

处理这个文件，必须要用代码的方式，体现出来，让你能用代码操作它。这里主要是使用input标签的onchange事件。

var file = document.getELementById('file');
file.onchange = function(e){
    var files = e.target.files;
    //这个files就是获取的file文件的一个数组。之后你可以使用任何方式来操作它。
}

关于file的小知识：前端在读取到files数组之后，可以对得到的文件一些属性进行读取。这些属性分别是：name、size、type、lastModifiedDate。

一个特别重要的点就是判断图片的大小，根据文件的大小进行后续操作。

var file = files[0];//比如这个file是图片
if(file.size > 5000){
    //处理压缩操作
}

第二步，读取文件
1、读取文件，主要使用的是FileReader类。它提供了几个方法。

readAsText(file, encoding); 
以纯文本形式读取文件，读取到的文本保存在result属性中。第二个参数代表编码格式。

readAsDataUrl(file); 
读取文件并且将文件以数据URI的形式保存在result属性中。

readAsBinaryString(file); 
读取文件并且把文件以字符串保存在result属性中。

readAsArrayBuffer(file); 
读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。

2、文件读取的过程是异步操作，在这个过程中提供了三个事件。progress、error、load事件。

progress-每隔50ms左右，会触发一次progress事件。

error-在无法读取到文件信息的条件下触发。

load-在成功加载后就会触发。

第三步，相关源码
html： 
分别用input标签获取文件，span获取文件的进度条，div来查看获取的数据源。

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

</div>

js代码：

//获取页面元素对象
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;
        }
    }
}