FileReader是一種非同步檔案讀取機制，結合input:file可以很方便的讀取本地檔案。

input:file

在介紹FileReader之前，先簡單介紹input的file型別。

<input type="file" id="inputBox">

input的file型別會渲染為一個按鈕和一段文字。點選按鈕可開啟檔案選擇視窗，文字表示對檔案的描述（大部分情況下為檔名）；file型別的input會有files屬性，儲存著檔案的相關資訊。

點選按鈕上傳一個檔案後，在控制檯列印input.files，如下：

可以發現input.files是一個數組，由傳入的file物件組成。每個file物件包含以下屬性：

lastModified：數值，表示最近一次修改時間的毫秒數；

lastModifiedDate：物件，表示最後一次表示最近一次修改時間的Date物件（高程中說是字串，根據上圖可看出應該為物件，為了層級清晰未對其展開，大家可自行檢視，其可呼叫Date物件的有關方法，例如getDay方法）；

name：本地檔案系統中的檔名；

size：檔案的位元組大小；

type：字串，檔案的MIME型別；

weblitRelativePath：此處為空；當在input上加上webkitdirectory屬性時，使用者可選擇資料夾，此時weblitRelativePath表示資料夾中檔案的相對路徑。比如：

<input type="file" id="inputBox" webkitdirectory>

點選按鈕新增一個包含3個檔案的名為php的資料夾後，控制檯列印inputBox.files，如下：

可看出，此時weblitRelativePath表示當前file物件的檔案在資料夾中的路徑。

FileReader

以上file物件只獲取到了對檔案的描述資訊，但沒有獲得檔案中的資料，而inputBox.value也只是儲存的是檔案的絕對路徑（這裡就不展示了，大家可以自己試一試）。我們可以通過html5提供的FileReader讀取到檔案中的資料。

首先建立一個FileReader例項：

var reader = new FileReader();

方法

FileReader提供瞭如下方法：

readAsArrayBuffer(file)	按位元組讀取檔案內容，結果用ArrayBuffer物件表示
readAsBinaryString(file)	按位元組讀取檔案內容，結果為檔案的二進位制串
readAsDataURL(file)	讀取檔案內容，結果用data:url的字串形式表示
readAsText(file,encoding)	按字元讀取檔案內容，結果用字串形式表示
abort()	終止檔案讀取操作

readAsDataURL和readAsText較為常用，這裡只對這兩者進行說明。

readAsDataURL會將檔案內容進行base64編碼後輸出：

var inputBox = document.getElementById("inputBox");
inputBox.addEventListener("change",function(){
  var reader = new FileReader();
  reader.readAsDataURL(inputBox.files[0]);//發起非同步請求
  reader.onload = function(){
    //讀取完成後，資料儲存在物件的result屬性中
    console.log(this.result)
  }
})

控制檯為當前所傳檔案的base64編碼表示。由於媒體檔案的src屬性，可以通過採用網路地址或base64的方式顯示，因此我們可以利用readAsDataURL實現對圖片的預覽。

<input type="file" id="inputBox" >
<img src="" id="img">

var inputBox = document.getElementById("inputBox");
var img = document.getElementById("img");
inputBox.addEventListener("change",function(){
  var reader = new FileReader();
  reader.readAsDataURL(inputBox.files[0]);//發起非同步請求
  reader.onload = function(){
    //讀取完成後，將結果賦值給img的src
    img.src = this.result
  }
})

如上，只需將讀取的結果賦給圖片的src屬性，即可預覽圖片：

readAsText(file,encoding)可按指定編碼方式讀取檔案，但讀取檔案的單位是字元，故對於文字檔案，只要按規定的編碼方式讀取即可；而對於媒體檔案（圖片、音訊、視訊），其內部組成並不是按字元排列，故採用readAsText讀取，會產生亂碼，因此不是最理想的讀取檔案的方式。

事件

onabort	當讀取操作被中止時呼叫
onerror	當讀取操作發生錯誤時呼叫
onload	當讀取操作成功完成時呼叫
onloadend	當讀取操作完成時呼叫，無論成功或失敗
onloadstart	當讀取操作開始時呼叫
onprogress	在讀取資料過程中週期性呼叫

var inputBox = document.getElementById("inputBox");
var count=0;
inputBox.addEventListener("change",function(){
  var reader = new FileReader();
  reader.readAsText(inputBox.files[0],"utf-8");//發起非同步請求
  reader.onload = function(){
    console.log("載入成功")
  }
  reader.onloadstart = function(){
    console.log("開始載入")
  }
  reader.onloadend= function(){
    console.log("載入結束")
  }
  reader.onprogress = function(){
    count++;
    console.log("載入中"+count)
  }
})

每過50ms左右，就會觸發一次progress事件，對於較大的檔案可以利用progress實現進度條；onload事件在onloadend之前觸發。

由於種種原因無法讀取檔案時，會觸發error事件。觸發error事件時，相關資訊儲存在FileReader物件的error屬性中，這個屬性將儲存一個物件，此物件只有一個屬性code，即錯誤碼。1表示未找到檔案，2表示安全性錯誤，3表示讀取中斷，4表示檔案不可讀，5表示編碼錯誤。

如果想中斷讀取過程，可以呼叫abort方法，就會觸發abort事件。

無論觸發load，error，abort事件中哪一個，最終都會觸發loadend事件。