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. 6.Python enumerate 特性

    enumerate()可参考: list1 = ["这", "是", "一个", "测试"] for index,ite ...

  2. com.mysql.jdbc.Connection.isValid(I)Z

    spring boot项目 运行提示这个错误的时候 只需要配置

  3. intellij idea 配置gitlab ssh key

    1 安装git,登录官网https://www.git-scm.com/download/ ,选择相应系统版本,下载后安装好. 公司网慢的可以用第三方的软件管家下载. 2 打开git bash,不需要 ...

  4. MongoDB：索引操作

    首先插入十万个数据 ;i;i++){ var rand = parseInt(i*Math.random()); db.person_test.insert({"name":&qu ...

  5. tomcat/Java指定加载jar包的路径

    背景:部署的web站点,应用默认加载工程的/webapps/工程名/WEB-INF/lib下的jar包   但是我需要提供一个和web工程没关系的的jar包管理目录   解决方法: 执行java方法时 ...

  6. FloatingActionButton FAB 悬浮按钮

    FloatingActionButton简称FAB,这是一种比较美观的按钮: 1.使用前: FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App最主要的 ...

  7. 100-days: fifteen

    Title: Disney(迪士尼) moves from behemoth to colossus with closing(使…结束,使停止) of Fox(福克斯) deal(商业上的交易/协议 ...

  8. 100-days: fourteen

    Title: Face mask craze(面膜热) creates Korean(韩国) (a) billionaire with Goldman(高盛集团) backing face mask ...

  9. 三、putty工具常见设置

    转载自:https://www.cnblogs.com/hdk1993/p/4769072.html Putty是一个免费小巧的Win32平台下的telnet,rlogin和ssh客户端. 它的主程序 ...

  10. boost 编写finger服务

    本篇是模仿PYTHON TWISTED写一个FINGER示例. 从最简单的链接到通过接收字符串返回不同的内容 1 最简单的链接 #include <ctime> #include < ...