HTML5之FileReader文件读取接口

FileReader用来把文件读入内存，并且读取文件中的数据。
FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。

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接口的使用

<!DOCTYPE html>

<html>

    <head>

        <title>FileReader接口</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body>

        <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="myResult"></div>

    </body>

    <script type="text/JavaScript">

        //判断浏览器是否支持FileReader接口

        if(typeof FileReader == 'undefined'){

            var myResult = document.getElementById("myResult");

            var file = document.getElementById("file");

            myResult.InnerHTML = "你的浏览器不支持FileReader接口！";

            //使选择控件不可操作

            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 myResult = document.getElementById("myResult");

                myResult.innerHTML = "";

                //显示读取结果

                myResult.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 myResult = document.getElementById("myResult");

                myResult.innerHTML = "";

                //显示读取结果

                myResult.innerHTML = this.result;

            }

        }

        function readAsText(){

            var file = document.getElementById("file").files[0];

            var reader = new FileReader();

            //将文件以文本形式读入页面

            reader.readAsText(file);

            reader.onload=function(f){

                var myResult = document.getElementById("myResult");

                myResult.innerHTML = "";

                //显示读取结果

                myResult.innerHTML = this.result;

            }

        }

    </script>

</html>

HTML5之FileReader文件读取接口的更多相关文章

HTML5之fileReader异步读取文件及文件切片读取
fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取一.fileReader的方法与事件 1. ...
FileReader文件读取API
:用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 1.FileReader接口的方法 Fi ...
jmeter接口性能测试【CSV文件读取+接口关联+设置集合点】
一.前言周计划上安排了个接口性能测试的任务,便开始了职业生涯的第一个接口性能测试... 接口进行压测之前,首先需要调通脚本.有两种方式,一种是通过抓包工具(如fiddler)抓取业务接口:另一种是通 ...
从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取
HTML5新增标签以及HTML5新增的api 1.H5并不是新的语言,而是html语言的第五次重大修改--版本 2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...
HTML5 之 FileReader 方法上传并读取文件
原文地址:https://caochangkui.github.io/file-upload/ HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据 ...
html5中利用FileReader来读取文件。
利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...
FileReader：读取本地图片文件并显示
最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...
前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输
HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...

随机推荐

ZigBee相关网站链接
1.Arduino开源智能家居<认识Zigbee>zigbee功能和自组网介绍-Arduino中文社区 2.小米智能家庭套装为什么选择 ZigBee 协议?|极客公园 3.晓网智能家居Zi ...
python 数据分析库介绍
1 引言高效处理数据的python工具: 与外界进行交互: 读写各种文件格式和数据库准备: 对数据进行清理.修整.整合.规范化.重塑.切片切换.变形等处理以便进行分析转换: 对数据集做一些数学和 ...
尚硅谷springboot学习31-jdbc数据连接
可以使用JdbcTemplate操作数据库,可以在启动的时候自动建表,更新数据表配置依赖 <dependency> <groupId>org.springframework. ...
OpenJudge NOI 4976 硬币
http://noi.openjudge.cn/ch0207/4976/ 描述宇航员Bob有一天来到火星上,他有收集硬币的习惯.于是他将火星上所有面值的硬币都收集起来了,一共有n种,每种只有一个:面 ...
20175314 《Java程序设计》第五周学习总结
20175314 <Java程序设计>第五周学习总结教材学习内容总结 public接口可以被任意一个类实现,友好接口可被同一个包里的接口实现. Java不支持多重继承,即一个类只能有一个 ...
python中sys.path--学习
本着下定义开头吧:python中import某个A模块时,首先会从python的内置模块中查找是否含义该模块的定义若未查询到会从sys.path对应的模块路径查询是否含有对应模块的定义,如果搜索完成依 ...
springboot restful接口服务异常处理
一.spring boot中默认的错误处理机制二.自定义的异常处理
数字提取——C语言
Problem Description AekdyCoin is the most powerful boy in the group ACM_DIY, whose signature is valu ...
python 之函数
什么是函数引言现在有这么个情况:假设我们python中的len方法不可以使用了,而恰好你又要计算一个字符串的长度你该怎么办呢?有人说:‘简单,可以使用for循环嘛 s1 = "hello ...
Python：每日一题003
题目: 一个整数,它加上100和加上268后都是一个完全平方数,请问该数是多少? 程序分析: 在10000以内判断,将该数加上100后再开方,加上268后再开方,如果开方后的结果满足如下条件,即是结果 ...