热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

FileReader详解与实例---读取并显示图像文件

我们曾经在《HTML5中File对象初探》中,使用到了FileReader,在那篇文章中,它被用来将一个文件读取为二进制字符串,并通过xhr发送到后端形成交互。作为FileAPI的一部

我们曾经在《HTML5 中 File 对象初探》中,使用到了FileReader,在那篇文章中,它被用来将一个文件读取为二进制字符串,并通过 xhr 发送到后端形成交互。作为 File API 的一部分,FileReader 专门用于读取文件,根据 W3C 的定义,FileReader 接口 "提供一些读取文件的方法与一个包含读取结果的事件模型"

接下来,我们将逐一了解 FileReader 的方法与事件模型,并最终通过一个例子程序来应用 FireRead,在这个例子中,使用支持 FileReader 浏览器的用户将能够通过一个 file input 选择一个图像文件,并不经过后台将图像显示在页面中。下面的链接指向这个例子,值得注意的是,到目前为止,只有 Firefox 3.6+ 和 Chrome 6.0+ 实现了 FileReader 接口。

点此查看最终效果

在这之前的 web 应用程序中,实现这个效果的通常做法是将用户选择的图像文件传送至后端,后端对其进行存储,再将 URL 返回到前端,前端通过这个 URL 来显示图像。 FileReader 的突破在于使得 Javascript 拥有了处理文件的能力,它可以异步地读取存储在用户电脑中的文件,这里所指的文件,对于 Javascript 来说是一个 File 对象,FileReader 读取文件的全部方法皆依赖于此,对于 File 对象还不是很了解的话,请先阅读《HTML5 中 File 对象初探》,这是本文的基础。

1. 能力检测与创建实例

检测一个浏览器是否支持 FileReader 很容易做到,支持这一接口的浏览器有一个位于 window 对象下的 FileReader 构造函数,如果浏览器有这个构造函数,那么就可以 new 一个 FileReader 的实例来使用。

if ( typeof FileReader === 'undefined' ) {
alert(
" 您的浏览器未实现 FileReader 接口 " );
}
else {
var reader = new FileReader();
// do sth.
}
2. 方法

FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

方法名 
参数 
描述

abort 
none 
中断读取

readAsBinaryString 
file 
将文件读取为二进制码

readAsDataURL 
file 
将文件读取为 DataURL

readAsText 
file, [encoding] 
将文件读取为文本

readAsText: 该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。 
readAsBinaryString: 这个方法在《HTML5 中 File 对象初探》中已经被使用过一次了,它将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。 
readAsDataURL: 这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URI,Data URI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。点击这里了解更多关于 Data URI 的知识。

3. 事件

FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。

事件 
描述

onabort 
中断时触发

onerror 
出错时触发

onload 
文件读取成功完成时触发

onloadend 
读取完成触发,无论成功或失败

onloadstart 
读取开始时触发

onprogress 
读取中

文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。

reader.Onload= function () {                this.result     // 读取结果        }
4. 实例

了解了这些知识过后,我们来还原之前的示例。第一步,创建 html 部分,主要包括一个 input 和一个用来呈现结果的 div:

<p>  <label>请选择一个图像文件:label>  <input type="file" id="demo_input" />p> <div id="demo_result">   div>

接下来获取节点,并处理浏览器兼容部分,对于未实现 FileReader 接口的浏览器将给出一个提示并禁用 input,否则监听 input 的 change 事件。

if ( typeof FileReader === 'undefined' ){        result.innerHTML = "

抱歉,你的浏览器不支持 FileReader

"; input.setAttribute( 'disabled','disabled' );} else { input.addEventListener( 'change',readFile,false );}

最后书写函数 readFile 的代码,当 file input 的 change 事件触发时,调用这个函数,首先获取到 file 对象,并通过 file 的 type 属性来检验文件类型,在这里,我们只允许选择图像类型的文件。然后创建一个 FileReader 实例,并且调用 readAsDataURL 方法读取文件,在实例的 load 事件中,获取到成功读取到的文件内容,并以插入一个 img 节点的方式,显示在页面中。

function readFile(){        var file = this.files[0];        if(!/image\/\w+/.test(file.type)){                alert("请确保文件为图像类型");                return false;        }        var reader = new FileReader();        reader.readAsDataURL(file);        reader.onload = function(e){                result.innerHTML = ''        }}
参考资料:
  • W3C File API --- FileReader Interface
  • MDC --- FileReader


推荐阅读
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 本文介绍了在Windows环境下如何配置php+apache环境,包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]
  • 本文由编程笔记小编整理,主要介绍了使用Junit和黄瓜进行自动化测试中步骤缺失的问题。文章首先介绍了使用cucumber和Junit创建Runner类的代码,然后详细说明了黄瓜功能中的步骤和Steps类的实现。本文对于需要使用Junit和黄瓜进行自动化测试的开发者具有一定的参考价值。摘要长度:187字。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • JavaScript简介及语言特点
    本文介绍了JavaScript的起源和发展历程,以及其在前端验证和服务器端开发中的应用。同时,还介绍了ECMAScript标准、DOM对象和BOM对象的作用及特点。最后,对JavaScript作为解释型语言和编译型语言的区别进行了说明。 ... [详细]
  • 本文介绍了网页播放视频的三种实现方式,分别是使用html5的video标签、使用flash来播放以及使用object标签。其中,推荐使用html5的video标签来简单播放视频,但有些老的浏览器不支持html5。另外,还可以使用flash来播放视频,需要使用object标签。 ... [详细]
  • ejava,刘聪dejava
    本文目录一览:1、什么是Java?2、java ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • 如何优化Webpack打包后的代码分割
    本文介绍了如何通过优化Webpack的代码分割来减小打包后的文件大小。主要包括拆分业务逻辑代码和引入第三方包的代码、配置Webpack插件、异步代码的处理、代码分割重命名、配置vendors和cacheGroups等方面的内容。通过合理配置和优化,可以有效减小打包后的文件大小,提高应用的加载速度。 ... [详细]
  • 原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中,有两种配置文件,一种 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • web.py开发web 第八章 Formalchemy 服务端验证方法
    本文介绍了在web.py开发中使用Formalchemy进行服务端表单数据验证的方法。以User表单为例,详细说明了对各字段的验证要求,包括必填、长度限制、唯一性等。同时介绍了如何自定义验证方法来实现验证唯一性和两个密码是否相等的功能。该文提供了相关代码示例。 ... [详细]
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施
    本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响,并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架,常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中,与Spring控制器一起使用时,存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节,并给出了防范该漏洞的建议措施。 ... [详细]
author-avatar
濮阳小贝
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有