方法：

方法名 参数 描述
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. ubuntu16.04 重置mysql密码

    先登陆服务器,找到自己的my.cnf文件,通常会在 /etc目录下(如果不在,可以用find / -name my.cnf命令找一下), 然后使用 vi my.cnf 命令编辑该文件(建议先备份),在 ...

  2. 【Vue中的坑】Vue打包上传线上报Uncaught SyntaxError: Unexpected token <

    今天在vue打包上传线上后,报一下错误,一下就懵了,这可咋整啊,一如既往的想都没想就开始复制错误,上网开搜 Uncaught SyntaxError: Unexpected token < Un ...

  3. 关于数据库text字段

    问题描述: maven项目中,使用MBG代码生成器自动生成的实体类对象时,当数据库中表的字段有 text 类型时,对应到java类中是String类型的,在前端页面通过ajax获取到 json 格式的 ...

  4. 不要对md5file.read()计算md5值

    最近遇到的一个问题,我使用以下代码对备份文件计算MD5值: # md5file=open("%s" % outputpath, 'rb') # md5=hashlib.md5(md ...

  5. 服务器搭建---Linux安装Node.js

    先去官网下载:https://nodejs.org/en/download/ 把压缩包上传到服务器的/usr/local/soft(博主习惯)文件夹下  解压文件: cd /usr/local/sof ...

  6. php和js的小区别

    1.今天看了下php的api感觉还可以,不是很难,可能没看到深入的地方, (1)和js很相似 目前感觉它和js的最大区别 js的  点  被替换成 -> function setCate($pa ...

  7. Django回顾之_03_Model属性及后端配置

    1. Django ORM O(objects):类和对象. R(Relation):关系,关系数据库中的表格. M(Mapping):映射. Django ORM框架的功能: a) 建立模型类和表之 ...

  8. pipeline简单规则

    Declarative 1. pipeline{ agent options{ } stages{ stage(' '){ steps{ } } } post{ always{} changed{} ...

  9. BZOJ [Scoi2010]游戏

    题解: 解法一:建立图论模型,发现只要联通块中有环则这个联通块中的值都可以被攻击到 如果是树,则只能攻击size-1个 解法二:二分图匹配,二分答案,看看是否能攻击到mid #include<i ...

  10. Ubuntu apt install 下载软件很慢的解决办法

    1.打开/etc/apt/sources.list 将内容替换为以下内容(注意把sources.list文件备份一下) deb http://mirrors.aliyun.com/ubuntu/ xe ...