如果想要读取或浏览文件,则需要通过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接口读取文件内容的更多相关文章

  1. FileReader实现读取文件内容并输出到屏幕上

    FileReader与FileInputStream都是从文件读数据,而前者一次读一个字符,后者一次读一个字节(在Unicode编码环境下1个字符=2个字节) package com.janson.d ...

  2. h5-21-文件操作-读取文件内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

  4. android按行读取文件内容的几个方法

    一.简单版 import java.io.FileInputStream; void readFileOnLine(){ String strFileName = "Filename.txt ...

  5. android逐行读取文件内容以及保存为文件

    用于长时间使用的apk,并且有规律性的数据 1,逐行读取文件内容 //首先定义一个数据类型,用于保存读取文件的内容 class WeightRecord { String timestamp; flo ...

  6. HTML5 文件域+FileReader 分段读取文件(五)

    一.默认FileReader会分段读取File对象,这是分段大小不一定,并且一般会很大 HTML: <div class="container"> <!--文本文 ...

  7. Java中使用BufferedReader的readLine()方法和read()方法来读取文件内容

    目标:读文件 编程时,有很多时候需要读取本地文件,下面介绍一下读取方式: 读单行文件 package com; import java.io.*; import java.util.ArrayList ...

  8. 在Spring Boot快捷地读取文件内容的若干种方式

    引言: 在Spring Boot构建的项目中,在某些情况下,需要自行去读取项目中的某些文件内容,那该如何以一种轻快简单的方式读取文件内容呢?  基于ApplicationContext读取 在Spri ...

  9. html5中利用FileReader来读取文件。

    利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...

随机推荐

  1. SpringMVC 使用 MultipartFile 实现文件上传

    该代码实现了文件上传和文本字段同时传递到后台进行处理的功能. 直接贴代码,中间涉及到的实体类就不贴了,和功能没啥关系的. Controller /** * 添加活动 * * @param req * ...

  2. MySql事务的隔离级别及作用

    逻辑工作单元遵循一系列(ACID)规则则称为事务. 原子性:保证事务是一系列的运作,如果中间过程有一个不成功则全部回滚,全部成功则成功.保证了事务的原则性. 一致性:一致性指的是比如A向B转100块钱 ...

  3. springmvc的Controller里实现转发的同时弹出提示对话框

    以前写servlet时就用到这个,但是现在学了springMVC+hibernate后就不知道怎么实现了,后来在网上找了好多,看了好多,最后经过自己实践成功的如下: 1.首先是Controller控制 ...

  4. Python super() 函数的概念和例子

    概念: super() 函数是用于调用父类(超类)的一个方法. super 是用来解决多重继承问题的,直接用类名调用父类方法在使用单继承的时候没问题,但是如果使用多继承,会涉及到查找顺序(MRO).重 ...

  5. vue中复选框全选与反选

    html主要部分: <template v-for="(item, index) in checkboxList"> <input type="chec ...

  6. 去掉word页眉上横线的技巧

    页眉下面会出现一条横线 双击页眉进入页眉页脚编辑状态.选定页眉内容.点击菜单栏[开始]-[清除一切格式]图标. 效果图: 方法二 进入页眉编辑状态,同时自动切换到了“设计”选项卡.同时注意观察,在页眉 ...

  7. MySQL(4)---慢查询

    慢查询 简介       开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 一.配置慢查询 1.参数说明 slow_query_l ...

  8. java提高(2)---正则表达式(1)常用符号

    正则表达式---常用符号 首先声明,我这里列表的是经常使用的一些符号,如果你想得到全部,那建议你通过API中,搜索Pattern类,会得到所有符号. 字符类 [abc] a.b 或 c(简单类) [^ ...

  9. C++—程序的内存分区

    代码区 ​ 程序被操作系统加载到内存时,所有可执行的代码被加载到代码区,也叫代码段,存储程序的代码指令.程序运行时,这段区域数据不可被修改只可以被执行. 静态区 ​ 程序中的静态变量.全局变量存放在此 ...

  10. springboot 与 shiro 整合 (简洁版)

    前言: 网上有很多springboot 与 shiro 整合的资料,有些确实写得很好, 对学习shiro和springboot 都有很大的帮助. 有些朋友比较省事, 直接转发或者复制粘贴.但是没有经过 ...