JavaScript中的FileReader示例詳解

第JavaScript中的FileReader示例詳解目錄前言：input:fileFileReader補(bǔ)充：一個(gè)比較全面的例子總結(jié)

前言：

FileReader是一種異步文件讀取機(jī)制，結(jié)合input:file可以很方便的讀取本地文件。

input:file

在介紹FileReader之前，先簡(jiǎn)單介紹input的file類型。

inputtype="file"id="file"

input的file類型會(huì)渲染為一個(gè)按鈕和一段文字。點(diǎn)擊按鈕可打開(kāi)文件選擇窗口，文字表示對(duì)文件的描述（大部分情況下為文件名）；file類型的input會(huì)有files屬性，保存著文件的相關(guān)信息。

document.querySelector('#file').addEventListener('change',(fileChoosed)={

console.log('fileChoosed',fileChoosed.target.files)

點(diǎn)擊按鈕上傳一個(gè)文件后，在控制臺(tái)打印上傳的文件信息，如下：

可以發(fā)現(xiàn)文件信息是一個(gè)json對(duì)象，由傳入的file對(duì)象組成。每個(gè)file對(duì)象（即每個(gè)上傳文件）包含以下屬性：

lastModified：數(shù)值，表示最近一次修改時(shí)間的毫秒數(shù)；

lastModifiedDate：對(duì)象，表示最近一次修改時(shí)間的Date對(duì)象；

name：本地文件系統(tǒng)中的文件名；

size：文件的字節(jié)大小；

type：字符串，文件的MIME類型；

webkitRelativePath：此處為空；當(dāng)在input上加上webkitdirectory屬性時(shí)，用戶可選擇文件夾，此時(shí)webkitRelativePath表示文件夾中文件的相對(duì)路徑。

inputtype="file"id="file"webkitdirectory

FileReader

以上file對(duì)象只獲取到了對(duì)文件的描述信息，但沒(méi)有獲得文件中的數(shù)據(jù)。我們可以通過(guò)html5提供的FileReader讀取到文件中的數(shù)據(jù)。

首先創(chuàng)建一個(gè)FileReader實(shí)例：

constreader=newFileReader();

FileReader提供了如下方法：

readAsArrayBuffer(file)

按字節(jié)讀取文件內(nèi)容，結(jié)果用ArrayBuffer對(duì)象表示

readAsBinaryString(file)

按字節(jié)讀取文件內(nèi)容，結(jié)果為文件的二進(jìn)制串

readAsDataURL(file)

讀取文件內(nèi)容，結(jié)果用data:url的字符串形式表示

readAsText(file,encoding)

按字符讀取文件內(nèi)容，結(jié)果用字符串形式表示

abort()

終止文件讀取操作

readAsDataURL和readAsText較為常用，這里只對(duì)這兩者進(jìn)行說(shuō)明。

readAsDataURL會(huì)將文件內(nèi)容進(jìn)行base64編碼后輸出：

document.querySelector('#file').addEventListener('change',(fileChoosed)={

constreader=newFileReader();

reader.readAsDataURL(fileChoosed.target.files[0]);//發(fā)起異步請(qǐng)求

reader.onload=function(readRes){

console.log('加載完成',readRes.target.result)

控制臺(tái)為當(dāng)前所傳文件的base64編碼表示。由于媒體文件的src屬性，可以通過(guò)采用網(wǎng)絡(luò)地址或base64的方式顯示，因此我們可以利用readAsDataURL實(shí)現(xiàn)對(duì)圖片的預(yù)覽。

如下，只需將讀取的結(jié)果賦給圖片的src屬性，即可預(yù)覽圖片：

inputtype="file"id="file"/

imgsrc=""id="imgPreview"

document.querySelector('#file').addEventListener('change',(fileChoosed)={

constreader=newFileReader();

reader.readAsDataURL(fileChoosed.target.files[0]);//發(fā)起異步請(qǐng)求

reader.onload=function(readRes){

document.querySelector('#imgPreview').src=readRes.target.result

readAsText可按指定編碼方式讀取文件，但讀取文件的單位是字符，故對(duì)于文本文件，只要按規(guī)定的編碼方式讀取即可；而對(duì)于媒體文件（圖片、音頻、視頻），其內(nèi)部組成并不是按字符排列，故采用readAsText讀取，會(huì)產(chǎn)生亂碼。

FileReader事件：

onloadstart當(dāng)讀取操作開(kāi)始時(shí)調(diào)用onprogress在讀取數(shù)據(jù)過(guò)程中周期性調(diào)用onabort當(dāng)讀取操作被中止時(shí)調(diào)用onerror當(dāng)讀取操作發(fā)生錯(cuò)誤時(shí)調(diào)用onload當(dāng)讀取操作成功完成時(shí)調(diào)用onloadend當(dāng)讀取操作完成時(shí)調(diào)用，無(wú)論成功，失敗或取消

注釋：

每過(guò)50ms左右，就會(huì)觸發(fā)一次progress事件，對(duì)于較大的文件可以利用progress實(shí)現(xiàn)進(jìn)度條；由于種種原因無(wú)法讀取文件時(shí)，會(huì)觸發(fā)error事件。觸發(fā)error事件時(shí)，相關(guān)信息保存在FileReader對(duì)象的error屬性中，這個(gè)屬性將保存一個(gè)對(duì)象，此對(duì)象只有一個(gè)屬性code，即錯(cuò)誤碼。1表示未找到文件，2表示安全性錯(cuò)誤，3表示讀取中斷，4表示文件不可讀，5表示編碼錯(cuò)誤。

示例：

inputtype="file"id="file"/

document.querySelector('#file').addEventListener('change',(fileChoosed)={

constreader=newFileReader();

reader.readAsText(fileChoosed.target.files[0],'utf-8');//發(fā)起異步請(qǐng)求

reader.onloadstart=function(readRes){

//文件大于500kb則取消加載

if(readRes.total1024*500){

reader.abort()

}else{

console.log("開(kāi)始加載")

reader.onabort=function(readRes){

console.log('加載已取消')

reader.onprogress=function(readRes){

console.log("加載中",`${(readRes.loaded/readRes.total).toFixed(2)*100}/100`)

補(bǔ)充：一個(gè)比較全面的例子

實(shí)現(xiàn)的功能:

通過(guò)file控件預(yù)覽文本,圖片非文本,圖片的以二進(jìn)制串輸出拖拽上述文件實(shí)現(xiàn)預(yù)覽

包含的知識(shí)點(diǎn):

readAsText方法的使用readAsDataURL方法的使用readAsBinaryString方法的使用一些Promise的用法也穿插其中簡(jiǎn)單的拖拽用法

為了方便觀看,這里也把代碼帖上:

!DOCTYPEhtml

htmllang="zh-CN"

head

metacharset="UTF-8"

metaname="viewport"content="width=device-width,initial-scale=1.0"

metahttp-equiv="X-UA-Compatible"content="ie=edge"

titleFileReaderLearning/title

/head

body

div

formnovalidate

div

label選擇文件:

inputtype="file"name="avatars"id="attachment"accept="*/*"multiple/input

/label

/div

divid="result"/div

/form

/div

script

(function(window,doc,undefined){

function$(id){

returndoc.getElementById(id);

}

letApp={

createFileReader:()={

if(typeofFileReader==="undefined"){

thrownewError("FileReaderisnotavaliable");

}

returnnewFileReader();

},

/**

*@returnFileList

*/

getFiles:()={

varattachment=$("attachment"),

files=attachment.files;

returnfiles||newError("nofileuploaded");

},

/**

*統(tǒng)一的讀取接口

*/

read:function(api,file,callback){

letself=this;

returnnewPromise((resolve,reject)={

letreader=self.createFileReader();

reader.onload=e={

resolve(e.target.result);

};

reader.onerror=e={

reject("readerror");

};

reader.onabort=e={

reject("aborterror");

};

//size=1M

if(filefile.size1*1024*1024){

reject('fileistoolarge');

return;

}

reader[api](file);

});

},

onFileChange:function(callback){

letself=this;

$("attachment").onchange=function(e){

callback(self.getFiles());

};

},

onDrop:function(){

letself=this;

letresultContainer=$('result');

document.ondragover=e={

e.preventDefault();

};

document.ondrop=e={

e.preventDefault();

};

resultContainer.ondragend=e={

e.preventDefault();

};

resultContainer.ondrop=e={

e.preventDefault();

letfiles=e.dataTransfer.files;

self.handleAll(files);

};

},

handleFiles:function(files){

letself=this;

letp;

letret=[];

//FileList轉(zhuǎn)數(shù)組

[].slice.call(files).forEach(function(file,i){

consttype=file.type;

switch(true){

case/text\/\w+/.test(type):

p=self.read("readAsText",file);

break;

case/image\/\w+/.test(type):

p=self.read("readAsDataURL",file);

break;

default:

p=self.read("readAsBinaryString",file);

break;

}

ret.push(p);

});

returnret;

},

init:function(){

varself=this;

self.onDrop();

//這里的onFileChange不能寫成Promise,不然只會(huì)第一次有效,因?yàn)闋顟B(tài)已經(jīng)是fulfilled了

self.onFileChange(files={

self.handleAll(files);

});

},

handleAll:function(files){

letself=this;

Promise.all(self.handleFiles(files))