js FileReader 讀取文件

前言：FileReader是一種異步文件讀取機制，結合input:file能夠很方便的讀取本地文件。php

input:file

在介紹FileReader以前，先簡單介紹input的file類型。html

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

input的file類型會渲染爲一個按鈕和一段文字。點擊按鈕可打開文件選擇窗口，文字表示對文件的描述（大部分狀況下爲文件名）；file類型的input會有files屬性，保存着文件的相關信息。html5

點擊按鈕上傳一個文件後，在控制檯打印input.files，以下：web

能夠發現input.files是一個數組，由傳入的file對象組成。每一個file對象包含如下屬性：數組

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

lastModifiedDate：對象，表示最後一次表示最近一次修改時間的Date對象（高程中說是字符串，根據上圖可看出應該爲對象，爲了層級清晰未對其展開，你們可自行查看，其可調用Date對象的有關方法，例如getDay方法）；網絡

name：本地文件系統中的文件名；異步

size：文件的字節大小；this

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事件。

轉載自：https://www.cnblogs.com/youhong/p/7221080.html?utm_source=itdadao&utm_medium=referral