更新时间: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对象。
【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【AI大模型开发-Python】毕业33个工作日,就业率已达到94.55%,班均薪资20763元
2025-09-19【AI智能应用开发-Java】毕业5个工作日就业率98.18%,最高薪资 17.5k*13薪,全班平均薪资9244元
2025-09-19