原文：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){
    //處理壓縮操作
}

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" onchange="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;
        }
    }
}