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

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

總覽

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

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

◆Blob接口:用于表示一段二進制數據，并允許我們通過JS“切割”其數據的字節數

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

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

這里有兩個細節需要注意：

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

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

接口描述

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

FileList接口

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

Blob界面

#Blob.size //只讀屬性，數據的字節數＃Blob.slice（start，length）//剪切當前文件并將結果返回給

文件界面

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

FileReader方法

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

FileReader事件

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

FileReader屬性

#FileReader.result //讀取結果（二進制，文本或DataURL格式）＃FileReader.readyState //讀取操作狀態（EMPTY，LOADING，DONE）

代碼示例

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

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

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

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

最后，關注FileAPI實踐的三點

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

2.＃Blob.slice為webkit內核添加前綴，即＃Blob.webkitSlice，第二個參數不是“length”，而是“end”。換句話說，上面的例子2應該改為file.webkitSlice（3，size）才能生效

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