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文件读取接口的更多相关文章

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

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

  2. FileReader文件读取API

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

  3. jmeter接口性能测试【CSV文件读取+接口关联+设置集合点】

    一.前言 周计划上安排了个接口性能测试的任务,便开始了职业生涯的第一个接口性能测试... 接口进行压测之前,首先需要调通脚本.有两种方式,一种是通过抓包工具(如fiddler)抓取业务接口:另一种是通 ...

  4. 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  6. HTML5 之 FileReader 方法上传并读取文件

    原文地址:https://caochangkui.github.io/file-upload/ HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据 ...

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

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

  8. FileReader：读取本地图片文件并显示

    最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...

  9. 前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输

    HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...

随机推荐

  1. 【Noip模拟 20161005】运货

    问题描述 小ww开了一家快递公司,在nn个城市之间进行货物运输工作,一共雇了mm个快递员. 每个快递员性格很奇特,第ii号快递员只愿意将货物从城市sisi运送到titi(甚至不愿意将货物 从titi运 ...

  2. cxGrid类似pagecontrol的效果

    1.对TcxGrid创建多个Level 2.对TcxGrid的TcxGridLevelOptions的TabsForEmptyDetail设置为True 3.再设置DetailTabsPosition ...

  3. 使用JavaMail发送邮件-从FTP读取图片并添加到邮件正文发送

    业务分析: 最近工作需要,需要从FTP读取图片内容,添加到邮件正文发送.发送邮件正文,添加附件采用Spring的MimeMessageHelper对象来完成,添加图片也将采用MimeMessageHe ...

  4. SocketIO Client

    package com.x061.socketio.demo; import org.json.JSONObject; import io.socket.client.IO; import io.so ...

  5. 十、Strategy 策略模式

    需求:使用不同的算法解决相同的问题 设计原理: 代码清单: 接口 Strategy public interface Strategy { public abstract Hand nextHand( ...

  6. Tengine安装(阿里baba的)-Nginx

    在先前的文章中介绍过Tengine,先前只是使用了运维人员配置好的内容,未自己进行过安装配置.周末闲来无事,对于Tengine进行了尝试性的安装.记录下面方便以后再做改进. Tengine官网上有个非 ...

  7. 通过msyql proxy链接mysql中文乱码及session问题

    1.session问题 问题前提:一台机数据库为两个实例,通过不同的socket监听不同端口对外提供服务.不同的站点都访问同一个VIP不同的端口进行访问数据库. 故障现象:一旦有一个站点先用了这个vi ...

  8. redis5 集群迁移方案

    Redis5 集群迁移方案 一.KEY优化 1.按原来要求进行优化与大KEY分拆. 二.现Redis 集群缩容(对业务无影响) 主节点按要求合并至3个主节点. 业务配置为3主4从 删除没有槽的主节点与 ...

  9. input date 支持placeholder属性

    第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能   ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{  col ...

  10. LAB2

    任务1: 效果:HelloWorld 好像完全按视频做就行了 学会了:把glassfish改好了,能跑 没学会:视频里的解说不懂在干嘛,得再看看 任务2 效果:intersetingpicture要求 ...