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. 编程语言的分类及其优缺点，Python标准输入与输出

    一. 编程语言分类 1.机器语言 以0,1的组合作为指令集,用二进制指令来编写程序: 优点:执行效率高 缺点:开发效率低 2.汇编语言 用英文标签代替二进制指令集来编写程序,比机器语言稍微高级,但本质 ...

  2. Ubuntu下解决MySQL自启动,chkconfig list 全部off 情况

    chkconfig命令是用于RedHat/Fedora发行版的,而对于像Ubuntu之类的Debian发行版,应该使用这个命令: sudo update-rc.d mysql defaults 验证一 ...

  3. iOS app审核被拒申诉

    提交申诉理由之后不需要点击“提交审核”按钮,否则按照重新提交算,需要重新排队,且申诉会不起作用.

  4. const命令声明变量应注意的几点

    对于复合类型的变量,变量名不指向数据,而是指向数据所在的地址.const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心. const person = ...

  5. Zabbix告警脚本-微信

    1.weixin.sh [root@iot-svndata02 bin]# cat weixin.sh #!/bin/bash ###SCRIPT_NAME:weixin.sh### ###send ...

  6. 171. Excel Sheet Column Number (Math)

    Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, retur ...

  7. 项目总结18-使用textarea无法判断空值之坑

    项目总结18-使用textarea无法判断空值之坑 今天使用js判断textarea为空,发现怎么都无法成功仔细做了对比测试,发现结果如下: 1-JS代码 if($("#content&qu ...

  8. swift 设置阴影和圆角

    1.正常view设置阴影 func setShadow(view:UIView,sColor:UIColor,offset:CGSize, opacity:Float,radius:CGFloat) ...

  9. springboot restful接口服务异常处理

    一.spring boot中默认的错误处理机制 二.自定义的异常处理

  10. strcpy函数用法

    字符串是数组类型,不能通过赋值运算进行,要通过strcpy进行拷贝,其中目的字符串必须是字符串变量,源字符串可以是常量,复制后源字符串保持不变. strcpy()是C中的一个复制字符串的库函数,在C+ ...