http://blog.csdn.net/zk437092645/article/details/8745647

用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6.0+实现了FileReader接口。

1、FileReader接口的方法

FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

FileReader接口的方法
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。

FileReader接口的事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成,无论成功失败

3、FileReader接口的使用

<script type="text/javascript">
var result=document.getElementById("result");
var file=document.getElementById("file"); //判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
result.InnerHTML="<p>你的浏览器不支持FileReader接口!</p>";
//使选择控件不可操作
file.setAttribute("disabled","disabled");
} function readAsDataURL(){
//检验是否为图像文件
var file = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("看清楚,这个需要图片!");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e){
var result=document.getElementById("result");
//显示文件
result.innerHTML='<img src="' + this.result +'" alt="" />';
}
} function readAsBinaryString(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以二进制形式读入页面
reader.readAsBinaryString(file);
reader.onload=function(f){
var result=document.getElementById("result");
//显示文件
result.innerHTML=this.result;
}
} function readAsText(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以文本形式读入页面
reader.readAsText(file);
reader.onload=function(f){
var result=document.getElementById("result");
//显示文件
result.innerHTML=this.result;
}
}
</script>
<p>
<label>请选择一个文件:</label>
<input type="file" id="file" />
<input type="button" value="读取图像" onclick="readAsDataURL()" />
<input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
<input type="button" value="读取文本文件" onclick="readAsText()" />
</p>
<div id="result" name="result"></div>

  

HTML5学习之FileReader接口的更多相关文章

  1. HTML5 FileReader接口学习笔记

    1.FileReader概述 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中F ...

  2. Html5 js FileReader接口

    用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据.到目前文职,只有FF3.6+和Chrome6 ...

  3. HTML5 学习总结(一)——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  4. HTML5 学习笔记(一)——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  5. HTML5 学习笔记--------》HTML5概要与新增标签!

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  6. HTML5学习总结——HTML5入门与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...

  7. HTML5学习笔记五:html5表单

    表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...

  8. html5学习第一天

    1.语义标签解决方案 <video></video> 属性: controls 显示控制栏 autoplay 自动播放 loop  设置循环播放 多媒体标签在网页中的兼容效果方 ...

  9. 感谢各位亲们的大力支持,免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了!

    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...

随机推荐

  1. 三年PS经验

  2. zoj 2387

    额  一个贪心  好难想到 ...... #include <cstring> #include <cstdio> #include <algorithm> #in ...

  3. 电商安全无小事,如何有效地抵御 CSRF 攻击?

    现在,我们绝大多数人都会在网上购物买东西.但是很多人都不清楚的是,很多电商网站会存在安全漏洞.比如乌云就通报过,国内很多家公司的网站都存在 CSRF 漏洞.如果某个网站存在这种安全漏洞的话,那么我们在 ...

  4. 利用link标签rel="alternate stylesheet"属性实现界面动态换肤

    rel="stylesheet"属性指定将一个样式表立即应用到文档.rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用 ...

  5. 李洪强iOS开发之XMPP

      XMPP历史 这个xmpp框架在2008年开始,不过是一个简单地RFC实现.提供一个最小的代理去接受三种xmpp的基本类型presence.message.iq.因为framwork只提供了最小的 ...

  6. Discuz模版与插件 安装时提示“对不起,您安装的不是正版应用...”解决方法

    关于出现“对不起,您安装的不是正版应用..”的解决办法 有些插件和风格在安装时出现不能安装的现象,出现以下提示:       对不起,您安装的不是正版应用,安装程序无法继续执行       点击这里安 ...

  7. javaweb学习总结(四十四)——监听器(Listener)学习

    一.监听器介绍 1.1.监听器的概念

  8. iOS开发--绘图教程

    本文是<Programming iOS5>中Drawing一章的翻译,考虑到主题完整性,翻译版本中加入了一些书中未涉及到的内容.希望本文能够对你有所帮助. 本文由海水的味道翻译整理,转载请 ...

  9. ArcGIS学习记录-Excel和Txt中XY点数据生成点Shape文件方法

    (一)Excel中XY点数据生成点Shape文件方法 1.Excel表如下:   2.点击ArcGIS中的"+"号按钮,添加数据.选择第一步中制作好的Excel文件,点击Add按钮 ...

  10. 【剑指offer】找出数组中出现一次的两个数

    2013-09-08 10:50:46 一个整型数组中,除了两个数字之外,其他数字都出现了2次,找出这两个只出现一次的数字,要求时间复杂度是O(N),空间复杂度是O(1). 小结: 任何数与0异或,结 ...