更新时间: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对象。
1024首播|39岁程序员逆袭记:不被年龄定义,AI浪潮里再迎春天
2025-10-241024程序员节丨10年同行,致敬用代码改变世界的你
2025-10-24【AI设计】北京143期毕业仅36天,全员拿下高薪offer!黑马AI设计连续6期100%高薪就业
2025-09-19【跨境电商运营】深圳跨境电商运营毕业22个工作日,就业率91%+,最高薪资达13500元
2025-09-19【AI运维】郑州运维1期就业班,毕业14个工作日,班级93%同学已拿到Offer, 一线均薪资 1W+
2025-09-19【AI鸿蒙开发】上海校区AI鸿蒙开发4期5期,距离毕业21天,就业率91%,平均薪资14046元
2025-09-19