使用FileReader接口读取文件内容
如果想要读取或浏览文件,则需要通过FileReader接口,该接口不仅可以读取图片文件,还可以读取文本或二进制文件,同时,根据该接口提供的事件与方法,可以动态侦察文件读取时的详细状态,接下来,我们详细介绍FileReader接口的使用方法。
FileReader 接口
FileReader 接口提供了一个异步的API,通过这个API可以从浏览器主线程中异步访问文件系统中的数据,基于此原因,FileReader 接口可以读取文件中的数据,并将读取的数据放入内存中。
当访问不同文件时,必须重新调用FileReader 接口的构造函数,因为每调用一次,FileReader 接口都将返回一个新的FileReader对象,只有这样,才能实现访问不同文件的数据。
FileReader 接口提供了一整套完整的事件处理机制,用于侦察FileReader对象读取或返回数据时的各种进程状态,FileReader接口的常用事件如下表所示:
在FileReader 接口中,除提供了常用事件外,还拥有许多常用的方法,用于读取文件或响应事件,如onabort事件触发时,就要调用abort()方法,FileReader接口的常用方法如下表所示:
针对FileReader 接口中的方法,使用说明如下:
调用readAsBinaryString()方法时,将file对象返回的数据块,作为一个二进制字符串的形式,分块读入内存中。
调用readAsArrayBuffer()方法时,将file对象返回的数据字节数,以数组缓冲的方式读入内存中。
调用readAsText()方法时,其中encoding参数表示文本文件编码的方式,默认值为utf-8,即以utf-8编码格式,将获取的数据块按文本方式读入内存中。
调用readAsDataURL()方法时,将file对象返回的数据块,以一串数据URL字符的形式展示在页面中,这种方法一般读取数据块较小的文件。
使用FileReader方法预览图片文件
在前面的实例中,通过Blob接口,可以访问文件数据块,获取文件相关信息。但如果想要读取文件,还需要通过fileReader 接口中的方法,将数据读入内存或页面中,例如,尺寸较小的图片文件,可以通过fileReader 接口中的readAsDataURL()方法,获取API异步读取的文件数据,另存为数据URL,将该URL绑定<img>元素的“src”属性值,就可以实现图片文件预览的效果。
下面通过一个实例介绍使用readAsDataURL()方法预览图片的过程。
实例 使用readAsDataURL()方法预览图片
1.功能描述
在页面表单中,添加一个“file”类型的<input>元素,用于选择上传文件,并设置属性“multiple”的值为“true”,表示允许上传多个文件,点击“选择文件”按钮后,如果选择的是图片文件,将在页面中显示,实现上传之前的图片预览功能。
2.实现代码
代码清单 使用readAsDataURL()方法预览图片
在实例中,页面导入一个JavaScript文件js6.js,在该文件中,调用fileUpload_PrevImageFile() 方法,该方法访问fileReader接口,将文件以数据URL的方式返回页面,其实现的代码如代码清单5-6-2所示:
代码清单实例中的JavaScript文件js6.js的源码
3. 页面效果
该页面在Chrome 10浏览器中执行的页面效果如图所示:
4. 源码分析
在本实例中,图片预览的过程实质上是图片文件被读取后展示在页面中的过程,为了实现这一过程,需要引用FileReader 接口中提供的读取文件方法readAsDataURL(),在引用接口前,考虑到各浏览器对接口的兼容性不一样,JavaScript代码首先检测用户的浏览器是否支持FileReader对象,如果不支持,则提示出错信息。
接下来,在JavaScript代码中,遍历传回的上传文件集合,获取每个“file”对象,由于每个文件返回的数据块都不同,因此,每次在读取文件前,必须先重构一个新的FileReader对象,然后,将每个文件以数据URL的方式读入页面中,当读取成功时,触发(onload)事件,在该事件中,通过result属性获取文件读入页面中的URL地址,并将该地址与<img>元素进行绑定,最后,通过列表ID号为“ulUpload”的列表元素,展示在页面中,从而实现上传图片文件预览的效果,详细实现过程如JavaScript代码中加粗部分所示。
转载地址:http://blog.sina.com.cn/s/blog_8e39cdcf0102wkbl.html
使用FileReader接口读取文件内容的更多相关文章
- FileReader实现读取文件内容并输出到屏幕上
FileReader与FileInputStream都是从文件读数据,而前者一次读一个字符,后者一次读一个字节(在Unicode编码环境下1个字符=2个字节) package com.janson.d ...
- h5-21-文件操作-读取文件内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5之fileReader异步读取文件及文件切片读取
fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...
- android按行读取文件内容的几个方法
一.简单版 import java.io.FileInputStream; void readFileOnLine(){ String strFileName = "Filename.txt ...
- android逐行读取文件内容以及保存为文件
用于长时间使用的apk,并且有规律性的数据 1,逐行读取文件内容 //首先定义一个数据类型,用于保存读取文件的内容 class WeightRecord { String timestamp; flo ...
- HTML5 文件域+FileReader 分段读取文件(五)
一.默认FileReader会分段读取File对象,这是分段大小不一定,并且一般会很大 HTML: <div class="container"> <!--文本文 ...
- Java中使用BufferedReader的readLine()方法和read()方法来读取文件内容
目标:读文件 编程时,有很多时候需要读取本地文件,下面介绍一下读取方式: 读单行文件 package com; import java.io.*; import java.util.ArrayList ...
- 在Spring Boot快捷地读取文件内容的若干种方式
引言: 在Spring Boot构建的项目中,在某些情况下,需要自行去读取项目中的某些文件内容,那该如何以一种轻快简单的方式读取文件内容呢? 基于ApplicationContext读取 在Spri ...
- html5中利用FileReader来读取文件。
利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...
随机推荐
- SpringMVC 使用 MultipartFile 实现文件上传
该代码实现了文件上传和文本字段同时传递到后台进行处理的功能. 直接贴代码,中间涉及到的实体类就不贴了,和功能没啥关系的. Controller /** * 添加活动 * * @param req * ...
- MySql事务的隔离级别及作用
逻辑工作单元遵循一系列(ACID)规则则称为事务. 原子性:保证事务是一系列的运作,如果中间过程有一个不成功则全部回滚,全部成功则成功.保证了事务的原则性. 一致性:一致性指的是比如A向B转100块钱 ...
- springmvc的Controller里实现转发的同时弹出提示对话框
以前写servlet时就用到这个,但是现在学了springMVC+hibernate后就不知道怎么实现了,后来在网上找了好多,看了好多,最后经过自己实践成功的如下: 1.首先是Controller控制 ...
- Python super() 函数的概念和例子
概念: super() 函数是用于调用父类(超类)的一个方法. super 是用来解决多重继承问题的,直接用类名调用父类方法在使用单继承的时候没问题,但是如果使用多继承,会涉及到查找顺序(MRO).重 ...
- vue中复选框全选与反选
html主要部分: <template v-for="(item, index) in checkboxList"> <input type="chec ...
- 去掉word页眉上横线的技巧
页眉下面会出现一条横线 双击页眉进入页眉页脚编辑状态.选定页眉内容.点击菜单栏[开始]-[清除一切格式]图标. 效果图: 方法二 进入页眉编辑状态,同时自动切换到了“设计”选项卡.同时注意观察,在页眉 ...
- MySQL(4)---慢查询
慢查询 简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 一.配置慢查询 1.参数说明 slow_query_l ...
- java提高(2)---正则表达式(1)常用符号
正则表达式---常用符号 首先声明,我这里列表的是经常使用的一些符号,如果你想得到全部,那建议你通过API中,搜索Pattern类,会得到所有符号. 字符类 [abc] a.b 或 c(简单类) [^ ...
- C++—程序的内存分区
代码区 程序被操作系统加载到内存时,所有可执行的代码被加载到代码区,也叫代码段,存储程序的代码指令.程序运行时,这段区域数据不可被修改只可以被执行. 静态区 程序中的静态变量.全局变量存放在此 ...
- springboot 与 shiro 整合 (简洁版)
前言: 网上有很多springboot 与 shiro 整合的资料,有些确实写得很好, 对学习shiro和springboot 都有很大的帮助. 有些朋友比较省事, 直接转发或者复制粘贴.但是没有经过 ...