FileReader讀取文件詳解

FileReader是一種異步文件讀取機制，結合input: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事件。

文章轉載修改自：https://www.cnblogs.com/xyyt/p/9066882.html