方法：

方法名 参数 描述
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. HDU - 4576 Robot（概率dp+滚动数组）

    题意:所有的格子围成一个圈,标号为1~n,若从格子1出发,每次指令告知行走的步数,但可能逆时针也可能顺时针走,概率都是1/2,那么问走了m次指令后位于格子l~r(1≤l≤r≤n)的概率. 分析: 1. ...

  2. 【分布式】流式计算Storm框架

    Storm简介: Storm起源Twitter开源的一个类似于Hadoop的实时数据处理框架,不过两则还是有区别的,Hadoop是批量处理数据,而Storm处理的是实时的数据流. Storm应用场景: ...

  3. js中数字的4种遍历方式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  4. 将本地项目映射到外网(tomcat web项目)

    1.首先如上图下载nat123软件,该软件可以免费内网映射. 2.根据上面图片,按要求填写即可:内网端口:自己web服务对应端口,内网地址:本机地址可以使默认localhost,内网ip,其余默认即可 ...

  5. 汉诺塔（思维、DP思想）

    链接:https://ac.nowcoder.com/acm/contest/3007/C来源:牛客网 题目描述 现在你有 N 块矩形木板,第 i 块木板的尺寸是 Xi*Yi,你想用这些木板来玩汉诺塔 ...

  6. Apache Spark：来自Facebook的60 TB +生产用例

    本文主要讲Facebook扩展spark替换hive的过程中积累的经验和教训. 浪尖整理翻译https://databricks.com/blog/2016/08/31/apache-spark-sc ...

  7. 低JAVA版本，高兼容性启动

    低JAVA版本,高兼容性启动 背景:部分操作系统java环境低版本,暂时无法更新最新版本,新系统需要使用较高版本Java环境 1.JAVA低版本不兼容当前应用 2.解压安装JAVA,无需配置环境变量 ...

  8. EVANYOU尤大个人网站主页CANVAS三角彩带效果分析学习

    尤雨溪网站三角彩带效果 效果: 源码 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  9. Tensorflow学习教程------代价函数

    Tensorflow学习教程------代价函数   二次代价函数(quadratic cost): 其中,C表示代价函数,x表示样本,y表示实际值,a表示输出值,n表示样本的总数.为简单起见,使用一 ...

  10. ROS的Target Platforms

    问题 今天编译VIORB遇到了以下错误: 查到的资料 ubuntu18安装的二进制ros包需要特定版本的库函数 ros官方文档 文档pdf 参考回答 参考回答pdf