首页技术文章正文

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

更新时间:2023-08-30 来源:黑马程序员 浏览量:

IT培训班

FileReader对象可以读取本地存储的文件。在使用FileReader对象前,需要实例化FileReader()构造函数,示例代码如下:

var reader=new FileReader ();

上述代码中,reader就是一个FileReader对象。FileReader对象的常用方法如表所示。

FileReader 对象的常用方法

1693387652976_方法名称.png

需要注意的是,无论文件是否读取成功,读取文件的方法都不会返回读取的结果,而是将读取结果存储到result 属性中。readAsTextO方法完成后,result 属性中将包含一个字符串用来表示读取文件的内容;readAsDataURLO方法完成后,result属性中将包含一个“data:JRL”格式的Base64字符串来表示读取文件的内容。使用FileReader对象读取文件内容的基本语法如下:

reader.readerAsText(File对象);    // 方式1:读取文本
reader.readAsDataURL(File对象);   // 方式2:读取图片的缩略图

FileReader对象的常用事件如表

1693388362069_事件名称.png

由于FileReader对象继承EventTarget对象,所以表中的事件也可以通过addEventListener()方法来使用。

下面演示如何监听文件读取成功事件,示例代码如下:

//将读取的内容显示到页面中
reader.onload=function() {  // onload事件在读取成功时触发
div.innerHTML=this.result;  // 将生成的内容显示到页面的div元素中
  img.src=this.result;      // 将生成的内容赋值为img图片的src
};

上述代码中,在onload事件中可以访问读取结果this.result。div和img表示用于显示文件内容的DOM对象。


分享到:
在线咨询 我要报名
和我们在线交谈!