更新时间:2023-08-30 来源:黑马程序员 浏览量:
FileReader对象可以读取本地存储的文件。在使用FileReader对象前,需要实例化FileReader()构造函数,示例代码如下:
var reader=new FileReader ();
上述代码中,reader就是一个FileReader对象。FileReader对象的常用方法如表所示。
FileReader 对象的常用方法
需要注意的是,无论文件是否读取成功,读取文件的方法都不会返回读取的结果,而是将读取结果存储到result 属性中。readAsTextO方法完成后,result 属性中将包含一个字符串用来表示读取文件的内容;readAsDataURLO方法完成后,result属性中将包含一个“data:JRL”格式的Base64字符串来表示读取文件的内容。使用FileReader对象读取文件内容的基本语法如下:
reader.readerAsText(File对象); // 方式1:读取文本 reader.readAsDataURL(File对象); // 方式2:读取图片的缩略图
FileReader对象的常用事件如表
由于FileReader对象继承EventTarget对象,所以表中的事件也可以通过addEventListener()方法来使用。
下面演示如何监听文件读取成功事件,示例代码如下:
//将读取的内容显示到页面中 reader.onload=function() { // onload事件在读取成功时触发 div.innerHTML=this.result; // 将生成的内容显示到页面的div元素中 img.src=this.result; // 将生成的内容赋值为img图片的src };
上述代码中,在onload事件中可以访问读取结果this.result。div和img表示用于显示文件内容的DOM对象。