FileReader 基本介绍
转自:http://blog.csdn.net/zk437092645/article/details/8745647
用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6.0+实现了FileReader接口。
1、FileReader接口的方法
FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。
方法名 | 参数 | 描述 |
---|---|---|
readAsBinaryString | file | 将文件读取为二进制编码 |
readAsText | file,[encoding] | 将文件读取为文本 |
readAsDataURL | file | 将文件读取为DataURL |
abort | (none) | 终端读取操作 |
2、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>
FileReader 基本介绍的更多相关文章
- 字符输入流_Reader类&FileReader类介绍和字符输入读取字符数据
java.io.Reader:字符输入流的最顶层父类,其中定义了一些共性的成员方法,是一个抽象类共性的成员方法 int read() 读取单个字符并返回 int read(char[] cbuf) 将 ...
- [HTML5] FileReader对象
写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...
- Java笔记--File,FileInputStream,FileReader,InputStreamReader,BufferedReader 的使用和区别
转自:http://hi.baidu.com/danghj/item/0ef2e2c4ab95af7489ad9e39 参考资料: < core java > 12 章 使用 Java ...
- FileInputStream(字节流)与fileReader(字符流) 的区别
FileInputStream 类 1 ) FileInputStream 类介绍: 以字节为单位的流处理.字节序列:二进制数据.与编码无关,不存在乱码问题. FileInputStream 类的主要 ...
- File,FileInputStream,FileReader,InputStreamReader,BufferedReader 的使用和区别
1 ) File 类介绍 File 类封装了对用户机器的文件系统进行操作的功能.例如,可以用 File 类获得文件上次修改的时间移动, 或者对文件进行删除.重命名.换句话说,流类关注的是文件内容,而 ...
- (转)Java 之 FileReader FileInputStream InputStreamReader BufferedReader 作用与区别
Java 之 FileReader FileInputStream InputStreamReader BufferedReader 作用与区别 ava.io下面有两个抽象类:InputStream和 ...
- Java 之 FileReader FileInputStream InputStreamReader BufferedReader 作用与区别
ava.io下面有两个抽象类:InputStream和ReaderInputStream是表示字节输入流的所有类的超类Reader是用于读取字符流的抽象类InputStream提供的是字节流的读取,而 ...
- 前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输
HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...
- java----FileInputStream类与FileReader类的区别(转)
FileInputStream类与FileReader类的区别:两个类的构造函数的形式和参数都是相同的,参数为File对象或者表示路径的String,它们到底有何区别呢? Readers and W ...
随机推荐
- VC++编程中常用的字符串转换函数
VC++编程中经常遇到不同编码编码的字符串之间需要转换的情况,以下简单提供几个不同编码字符串之间的转换函数: ANSI 字符串和Unicode字符串之间的转换 //Convert wide char ...
- 一步一步实现iOS应用PUSH功能
1. push原理 iOS push 工作机制可以用下图简要概括 Provider:应用自己的服务器: APNS:Apple Push Notification Service的简称,苹果的PUSH服 ...
- centOS7 修改hostname
hostnamectl set-hostname 你要修改到的hostname localectl set-locale LANG=要修改的语言 介绍个Centos 7很不错的教程网站:h ...
- System.out.println调试输出
Android开发中在代码中通过System.out.println调试输出在Logcat窗口中可以看到. 但Logcat视图中夹杂了太多的其它App及底层的信息,看起来并不明朗.可以在Logcat视 ...
- 一个for列出横纵坐标
h = i % * hCount; v = Math.floor(i / hCount);
- ubuntu 登录循环
星期一大清早一来,就出现这毛病.折腾了办个多小时,终于搞定: 我的原因:上周五的时候为了装hive改动了/etc/enviroment里面的东西,导致出错. 解决办法:1.Ctrl + Alt + F ...
- springmvc学习笔记--REST API的异常处理
前言: 最近使用springmvc写了不少rest api, 觉得真是一个好框架. 之前描述的几篇关于rest api的文章, 其实还是不够完善. 比如当遇到参数缺失, 类型不匹配的情况时, 直接抛出 ...
- 行为识别笔记:improved dense trajectories算法(iDT算法)(转载)
iDT算法是行为识别领域中非常经典的一种算法,在深度学习应用于该领域前也是效果最好的算法.由INRIA的IEAR实验室于2013年发表于ICCV.目前基于深度学习的行为识别算法效果已经超过了iDT算法 ...
- 权限分配界面 纯手工 仅用到bootstrap的架构 以及 c标签
<div class="form-group"> <div class="row"> <label ...
- ES6—解构赋值
1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明. 2. 数组的解构赋值 数组传统的变量赋值: var arr=[1,2,3]; ...