首頁技術文章正文

FileReader對象的常用方法有哪些?

更新時間:2023-08-30 來源:黑馬程序員 瀏覽量:

IT培訓班

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

var reader=new FileReader ();

上述代碼中,reader就是一個FileReader對象。FileReader對象的常用方法如表所示。

FileReader 對象的常用方法

1693387652976_方法名稱.png

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

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

FileReader對象的常用事件如表

1693388362069_事件名稱.png

由于FileReader對象繼承EventTarget對象,所以表中的事件也可以通過addEventListener()方法來使用。

下面演示如何監(jiān)聽文件讀取成功事件,示例代碼如下:

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

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


分享到:
在線咨詢 我要報名
和我們在線交談!