方法：

方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件：

事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值（this.result）。

示例代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>File Test</title>

</head>

<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>

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

</body>

</html>

HTML5之FileReader小结的更多相关文章

  1. 网站开发进阶(三十二)HTML5之FileReader的使用

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...

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

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

  3. HTML5之FileReader的使用

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  4. html5使用FileReader上传图片

    客户端代码是网上找的,修改为.net代码. <html><head>    <meta charset="utf-8">    <titl ...

  5. HTML5 使用FileReader实现调用相册、拍照功能

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  6. HTML5 通过 FileReader 实现文件上传

    概述 在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...

  7. [转] HTML5之FileReader的使用

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  8. HTML5之FileReader的使用.RP

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  9. IT兄弟连 HTML5教程 HTML5表单 小结及习题

    小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...

随机推荐

  1. 13 —— node 获取文件属性 —— 加载第三方模块

    以加载第三方时间处理模块( moment )为例 : 一,加载 npm install moment 二,使用介绍 1,点击进入npm官网 https://www.npmjs.com/ 2,搜索 mo ...

  2. 关于spring cloud “Finchley.RC2”版本在spring cloud config中的ArrayIndexOutOfBoundsException

    原文 https://www.cnblogs.com/Little-tree/p/9166382.html 在学spring cloud config的时候遇到一个ArrayIndexOutOfBou ...

  3. jsp页面引入不了js路径没错

    最近搞开发,发现有个jsp页面引入不了js:很是神奇,路径什么的都没问题,同事的浏览器可以加载该js,发现放到其他的文件夹下可以加载该js:当时没研究出来,任务紧就没研究了. 最近闲下来了,有去研究, ...

  4. iOS延迟执行方法

    swift 4.0中dispatch_async,dispatch_after的使用 2018年03月28日 16:15:44 xiao_yuly 阅读数:3576 版权声明:本文为博主原创文章,未经 ...

  5. mysql 中两个日期相减获得 天 小时 分钟 或者 小时:分钟的格式

    /**有一个需求,要求获得两个日期想减的天数,小时数,分钟数.通过查找资料,于是乎我写出了如下代码,来获得两个字段.*/ IFNULL(CONCAT( ,'-',''), ),),'天')), ),) ...

  6. Android进阶——多线程系列之Thread、Runnable、Callable、Future、FutureTask

    多线程一直是初学者最抵触的东西,如果你想进阶的话,那必须闯过这道难关,特别是多线程中Thread.Runnable.Callable.Future.FutureTask这几个类往往是初学者容易搞混的. ...

  7. C#高级编程（第9版） 第08章 委托、lambda表达式和事件 笔记

          本章代码分为以下几个主要的示例文件: 1. 简单委托 2. 冒泡排序 3. lambda表达式 4. 事件示例 5. 弱事件     引用方法 委托是寻址方法的.NET版本.在C++中函数 ...

  8. jquery关于Select元素的操作

    jQuery获取Select元素,并选择的Text和Value: $("#select_id").change(function(){//code...});           ...

  9. UVALive 3704 细胞自动机 矩阵快速幂

    是时候要做做数学类的题目了 这属于比较简单的矩阵快速幂了,因为有个已知的矩阵循环的结论,所以为了节约时空,只需要保留一行即可,这个稍微有点难写,也不是难写,主要是注意细节.其他的矩阵快速幂一下即可 # ...

  10. UVA 11922 伸展树Splay 第一题

    上次ZOJ月赛碰到一个题目要求对序列中的某个区间求gcd,并且还要随时对某位数字进行修改 插入 删除,当时马上联想到线段树,但是线段树不支持增删,明显还是不可以的,然后就敲了个链表想暴力一下,结果TL ...