方法：

方法名 参数 描述
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 1003：Max Sum

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  2. Java算法练习——最长公共前缀

    题目链接 题目描述 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 说明: 所有输入只包含小写字母 a-z . 示例 1 输入: [&qu ...

  3. C++基础--string转

    有时候除了要将数值型转为string外,可能也需要将一些string转为数值型,这个时候也还是可以用sstream字符串流来实现,同时也可以用C++标准库得到函数来实现. 1.字符串流 这个时候使用i ...

  4. Day 5 ：ArrayList原理、LinkedList原理和方法和迭代器注意事项

    迭代器在变量元素的时候要注意事项: 在迭代器迭代元素 的过程中,不允许使用集合对象改变集合中的元素个数,如果需要添加或者删除只能使用迭代器的方法进行操作.   如果使用过了集合对象改变集合中元素个数那 ...

  5. VUE.js入门学习（4）-动画特效

    1.VUE中CSS动画原理(more是  v-enter 具体的根据 name的来决定) 动画是通过在某一时间段来添加样式决定的. 要通过 transition进行包裹. 2.在VUE中使用 anim ...

  6. trove database功能总结

    我曾经以为trove只负责数据库(datastore)的部署,最近才发现trove可以进行数据库(database)的创建. 首先是列出某个实例上(instance)数据库(datastrore)上的 ...

  7. Linux环境创建交换分区

    最近在准备在移动端跑一下深度学习训练好的模型,在RK3399的板子上安装scipy时报错.网上查了一下,由于内存不足导致,做个交换分区就搞定了.那么如何做交换分区呢.话不多说,直接开撸. ------ ...

  8. pinpoint 单机HBASE数据量过大问题解决

    Pinpoint接入业务监控后数据量大涨,平均每周Hbase数据增量35G左右,数据量太大,需要对数据进行定期清理,否则监控可用性降低. 操作步骤 查找出数据大的hbase表 [root@iZ28ov ...

  9. 移动端 之 触摸事件、Tap事件和swipe事件

    触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...

  10. 游戏引擎UE4详解！

    UE4 的全名是 Unreal Engine 4,中文译为“虚幻引擎4”.UE4 是一款由 Epic Games 公司开发的开源.商业收费.学习免费的游戏引擎.那你了解UE4吗?如果还不清楚,就一起来 ...