1、FileReader概述

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

2、FileReader接口方法

方法名 参数 描述
readAsBinaryString file 将文件读取为二进制码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
readAsArrayBuffer file 将文件读取为ArrayBuffer对象
abort (none) 中断读取操作

3、FileReader接口事件

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

4、使用实例

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>Html5Test</title>

</head>

<body>

    <article>

        <header></header>

        <section>

            <p>

                <lable>请选择一个文件：</lable>

                <input type="file" id="file_reader">

                <input type="button" value="读取图像" onclick="readAsDataUrl();">

                <input type="button" value="读取二进制数据" onclick="readAsBinaryString();">

                <input type="button" value="读取文本文件" onclick="readAsText();">

            </p>

            <div id="file_reader_result" name="file_reader_result">

                <!-- 这里用来显示读取结果 -->

            </div>

            <script>

            var file_reader_result = document.getElementById("file_reader_result");

            // 检测浏览器是否支持FileReader

            if (typeof FileReader == "undefined") {

                file_reader_result.innerHTML = "您的浏览器不支持FileReader";

                file.setAttribute('disabled', 'disabled');

            }

            // 将文件以Data Url形式读入页面

            function readAsDataUrl(){

                // 检查是否为图像文件

                var f = document.getElementById("file_reader").files[0];

                if (!/image\/\w+/.test(f.type)) {

                    file_reader_result.innerHTML = "请上传图片文件！";

                    return false;

                };

                var reader = new FileReader();

                // 将文件以Data Url形式读入页面

                reader.readAsDataURL(f);

                reader.onload = function(e){

                    file_reader_result.innerHTML = '<img src="' + this.result + '" alt="图片" />';

                }

            }

            // 将文件以二进制形式读入页面

            function readAsBinaryString(){

                // 检查是否为图像文件

                var f = document.getElementById("file_reader").files[0];

                if (!/image\/\w+/.test(f.type)) {

                    file_reader_result.innerHTML = "请上传图片文件！";

                    return false;

                };

                var reader = new FileReader();

                // 将文件以二进制形式读入页面

                reader.readAsBinaryString(f);

                reader.onload = function(e){

                    file_reader_result.innerHTML = this.result;

                }

            }

            // 将文件以文本形式读入页面 目前测试仅支持txt文件

            function readAsText(){

                // 检查是否是文本文件

                var f = document.getElementById("file_reader").files[0];

                if (!/text\/\w+/.test(f.type)) {

                    file_reader_result.innerHTML = "请上传文本文件！";

                    return false;

                };

                var reader = new FileReader();

                // 将文件以文本形式读入页面

                reader.readAsText(f);

                reader.onload = function(e){

                    file_reader_result.innerHTML = this.result;

                }

            }

            </script>

        </section>

    </article>

</body>

</html>

更多参考内容详见：MDN FileReader

HTML5 FileReader接口学习笔记的更多相关文章

  1. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  2. 【整理】HTML5游戏开发学习笔记（5）- 猜谜游戏

    距上次学习笔记已有一个多月过去了,期间由于新项目赶进度,以致该学习计划给打断,十分惭愧.书本中的第六章的例子相对比较简单.所以很快就完成. 1.预备知识html5中video标签的熟悉 2.实现思路对 ...

  3. JMeter接口学习笔记2017

    协议学习地址:http://www.cnblogs.com/TankXiao/archive/2012/02/13/2342672.html 本篇学习笔记来自于慕课网上学习JMeter的学习笔记 学习 ...

  4. PHP 开发 APP 接口 学习笔记与总结 - Redis 缓存

    Redis 可以定期将数据备份到磁盘中(持久化),同时不仅仅支持简单的key/value 类型的数据,同时还提供list,set,hash等数据结构的存储:Memcache 只是简单的key/valu ...

  5. thinkphp5开发restful-api接口 学习笔记一

    视频学习地址: http://study.163.com/course/courseMain.htm?courseId=1004171002 源码和文档(如果满意,欢迎 star): https:// ...

  6. 工程化编程实战callback接口学习笔记

    一.编译并运行 help.version命令执行正常,但quit命令出错 二.Debug 从命令输入到执行过程: 源代码: 更改后: 运行结果:能正确运行quit命令 Callback接口学习成果: ...

  7. PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [3] 首页 APP 接口开发方案 ② 读取缓存方式

    以静态缓存为例. 修改 file.php line:11 去掉 path 参数(方便),加上缓存时间参数: public function cacheData($k,$v = '',$cacheTim ...

  8. OpenCV（C++接口)学习笔记1-图像读取、显示、保存

    OpenCV在2.0加入版本号之后C++接口函数,学习前C语言的接口功能.现在OpenCV它已被发展到2.4.9版本号,所以,我决定学习C++接口函数,与步伐. 1.创建图像 cv::Mat imag ...

  9. 【整理】HTML5游戏开发学习笔记（1）- 骰子游戏

    <HTML5游戏开发>,该书出版于2011年,似乎有些老,可对于我这样没有开发过游戏的人来说,却比较有吸引力,选择自己感兴趣的方向来学习html5,css3,相信会事半功倍.不过值得注意的 ...

随机推荐

  1. POST信息模拟登录获取页面内容

    最近项目里有一个是要模拟登录后,访问固定页面获取内容的要求,一开始用JQ AJAX好像不支持跨域请求.后使用.net中HttpWebRequest对象来获取.一开始访问总是无法在第二个页面正常访问,好 ...

  2. EF写distinct

    在日常开发中常常是这么写的 var logErrorRequest = from l in _logErrorRepository.Table select new { WrongTime = l.W ...

  3. 2018.8.26 Spring自学如门

    什么是Spring? Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE De ...

  4. Could not autowire. No beans of 'TbAssetsMapper' type found. less... (Ctrl+F1) Inspection info:Checks autowiring problems in a bean class.

    报错:Could not autowire. No beans of 'TbAssetsMapper' type found. less... (Ctrl+F1) Inspection info:Ch ...

  5. 【洛谷P1323】删数问题

    删数问题 题目链接 首先找出最小的k个数:用堆每次取出最小的元素p,将p*2+1和p*4+5压入堆. 贪心求最大数:从前往后找第一个data[j+1]>data[j],删除data[j].(链表 ...

  6. cudpp库的编译和使用

    项目主页 http://cudpp.github.io/ 根据这个网址的提示进行 https://github.com/cudpp/cudpp/wiki/BuildingCUDPPwithCMake ...

  7. System.Web.UI.Page

    mdsn:点击查看此类介绍 git:   点击查看封装方法   消息弹框,消息弹框跳转,自定义脚本信息 定义:表示一个从托管 ASP.NET Web 应用程序的服务器请求的 .aspx 文件(也称为 ...

  8. ADO.net中常用的对象有哪些？

    ADO.net中常用的对象有哪些?分别描述一下. 答:Connection 数据库连接对像 Command 数据库命令 DataReader 数据读取器 DataSet 数据集 DataReader与 ...

  9. iOS 多线程 之 GCD（大中枢派发）(二)

    本文接着上一篇讲.主要讲:dispatch_source. dispatch_source主要用户监听事件,可以监听如下事件 DISPATCH_SOURCE_TYPE_DATA_ADD DISPATC ...

  10. ES6 extends继承及super使用读书笔记

    extends 继承 extends 实现子类的继承 super() 表示父类的构造函数, 子类必须在 constructor中调用父类的方法,负责会报错. 子类的 this 是父类构造出来的, 再在 ...