的FIle api 在許多HTML5規(guī)范中，一些規(guī)范與文件處理有關(guān)。在早期的瀏覽器技術(shù)中，處理小字符串是js的最佳過程之一。但文件處理，特別是二進(jìn)制處理，一直是空白。在某些情況下，我們必須通過Flash/ActiveX/NP插件或云服務(wù)器處理更復(fù)雜或底層的數(shù)據(jù)。今天，一組新的HTML5規(guī)范正致力于為瀏覽器提供更強大的文件處理功能。

今天要介紹的FileAPI就是為解決這些問題而誕生的。

總覽

FileAPI是許多列文件處理規(guī)范的基礎(chǔ)，包括最基本的文件操作JavaScript接口設(shè)計。有四個主要的接口定義：

◆FileList接口:可用于表示一組文件的JS對象，例如用戶通過輸入[type='file']元素選擇的本地文件列表

◆Blob接口:用于表示一段二進(jìn)制數(shù)據(jù)，并允許我們通過JS“切割”其數(shù)據(jù)的字節(jié)數(shù)

◆文件接口:用于傳輸從Blob接口繼承的文件，并添加文件名和MIME類型等功能。

◆FileReader接口:提供讀取文件的方法和事件

這里有兩個細(xì)節(jié)需要注意：

1.我們通常使用input [type='file']元素來選擇單個文件，它本身允許同時選擇多個文件，因此將使用FileList

2. Blob接口和File接口可以返回諸如數(shù)據(jù)的字節(jié)數(shù)或“cut”之類的信息，但是無法獲取真實內(nèi)容，這就是FileReader存在的含義，并且文件可能存在時文件大小不同。花了很多時間，所以我們使用異步方法通過觸發(fā)另一個事件來返回文件的內(nèi)容

接口描述

這四個接口實際上并不復(fù)雜且易于理解（接口中的“#Foo”表示任何類型為Foo的對象）：

FileList接口

#FileList [index] //獲取索引文件

Blob界面

#Blob.size //只讀屬性，數(shù)據(jù)的字節(jié)數(shù)＃Blob.slice（start，length）//剪切當(dāng)前文件并將結(jié)果返回給

文件界面

#File.size //從Blob繼承，其含義與＃File.slice（start，length）相同//從Blob繼承，含義與#File.name相同//只讀屬性，文件名#File.type //只讀屬性，文件MIME類型#File.urn //只讀屬性，表示文件的URN，幾乎沒有用，暫時被忽略

FileReader方法

#FileReader.readAsBinaryString（blob/file）//以二進(jìn)制格式讀取文件內(nèi)容＃FileReader.readAsText（file，[encoding]）//以文本（和字符串）格式讀取文件內(nèi)容，并強制執(zhí)行要選擇的文件編碼#FileReader.readAsDataURL（file）//以DataURL格式讀取文件內(nèi)容＃FileReader.abort（）//結(jié)束讀取操作

FileReader事件

#FileReader.onloadstart //讀取操作開始時觸發(fā)#FileReader.onload //讀取操作成功時觸發(fā)#FileReader.onloadend //讀取操作完成時觸發(fā)（是否成功）#FileReader.onprogress //讀取操作期間觸發(fā)＃FileReader.onabort //讀取操作中斷時觸發(fā)＃FileReader.onerror //讀取操作失敗時觸發(fā)

FileReader屬性

#FileReader.result //讀取結(jié)果（二進(jìn)制，文本或DataURL格式）＃FileReader.readyState //讀取操作狀態(tài)（EMPTY，LOADING，DONE）

代碼示例

示例1：控制文件控件，讀取第二個文件，并在控制臺中輸出其文本內(nèi)容

Varinput=document.querySelector（'input [type='file']'）; //找到第一個文件控件varfirstFile=input.files [0]; //文件控件的files屬性實際上是一個FileList類型對象varsecondFile=input.files [1]; //當(dāng)文件控件的multiple屬性為true時，我們可以通過input.files [同時選擇多個文件] n]可以按順序訪問這些文件varreader=newFileReader（）; //新建一個FileReader類型對象reader.readAsText（secondFile）; //以文本格式讀取文件控件中的第二個文件。 reader.onloadend=function（e）{//bind read operations completed event.log（Reader.result）; //獲取讀取結(jié)果和輸出};

示例2：從包含UTF-8編碼的文本文件文件中刪除BOM表頭信息

Varsize=file.size; //首先獲取文件的總字節(jié)數(shù)varresult=file.slice（3，size-3）; //使用slice方法刪除前3個字節(jié)

最后，關(guān)注FileAPI實踐的三點

1.由于規(guī)范尚未最終確定，＃File.urn仍然有大變量，webkit沒有實現(xiàn)此功能

2.＃Blob.slice為webkit內(nèi)核添加前綴，即＃Blob.webkitSlice，第二個參數(shù)不是“l(fā)ength”，而是“end”。換句話說，上面的例子2應(yīng)該改為file.webkitSlice（3，size）才能生效

3.規(guī)范還規(guī)定了各種錯誤處理和異常處理，它們同樣重要：對于一整套規(guī)范或強大的程序。由于空間有限，本部分將不再詳述。您可以在W3C官方網(wǎng)站上自由查看