FileReader對(duì)象可以讀取本地存儲(chǔ)的文件。在使用FileReader對(duì)象前，需要實(shí)例化FileReader()構(gòu)造函數(shù)，示例代碼如下：

var reader=new FileReader ();

上述代碼中，reader就是一個(gè)FileReader對(duì)象。FileReader對(duì)象的常用方法如表所示。

FileReader 對(duì)象的常用方法

需要注意的是，無(wú)論文件是否讀取成功，讀取文件的方法都不會(huì)返回讀取的結(jié)果，而是將讀取結(jié)果存儲(chǔ)到result 屬性中。readAsTextO方法完成后，result 屬性中將包含一個(gè)字符串用來(lái)表示讀取文件的內(nèi)容;readAsDataURLO方法完成后，result屬性中將包含一個(gè)“data:JRL”格式的Base64字符串來(lái)表示讀取文件的內(nèi)容。使用FileReader對(duì)象讀取文件內(nèi)容的基本語(yǔ)法如下：

reader.readerAsText(File對(duì)象);    // 方式1:讀取文本
reader.readAsDataURL(File對(duì)象);   // 方式2：讀取圖片的縮略圖

FileReader對(duì)象的常用事件如表

由于FileReader對(duì)象繼承EventTarget對(duì)象，所以表中的事件也可以通過(guò)addEventListener()方法來(lái)使用。

下面演示如何監(jiān)聽(tīng)文件讀取成功事件，示例代碼如下：

//將讀取的內(nèi)容顯示到頁(yè)面中
reader.onload=function() {  // onload事件在讀取成功時(shí)觸發(fā)
div.innerHTML=this.result;  // 將生成的內(nèi)容顯示到頁(yè)面的div元素中
  img.src=this.result;      // 將生成的內(nèi)容賦值為img圖片的src
};

上述代碼中，在onload事件中可以訪問(wèn)讀取結(jié)果this.result。div和img表示用于顯示文件內(nèi)容的DOM對(duì)象。