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. 1.06 在WHERE子句中引用取别名的列

    如下查询,会抛出错误: mysql> select sal as salary, comm as commission from emp where salary < 5000;ERROR ...

  2. Codeforces Round #347 (Div.2)_A. Complicated GCD

    题目链接:http://codeforces.com/contest/664/problem/A A. Complicated GCD time limit per test 1 second mem ...

  3. nginx缓存批量清除

    研究了一段时间的缓存清除,说说了解的三种方式吧.        1. 原始的只增加缓存模块的,根据访问的路径一条条清除. 根据此方式要进行批量清除的话,必须在设定的缓存目录下通过自己写的程序来读取ng ...

  4. 重载<<操作符

    回头看我们之前的 rational.cpp,你满意了吗?反正我是觉得那些代码的可读性仍然欠佳:main 函数里边要多次调用 print 方法才能实现分数打印,酱紫不行! 如何通过重载 << ...

  5. 相机标定/校正（Camera Calibration）

    以前DIP課程有做過Camera calibration,這次因為用Gopro做Visual SLAM,所以又要撿一下校正的過程.主要還是張正友的方法. OpenCV: 用OpenCV自帶的Sampl ...

  6. this指向问题（1）

    在JS中,this一般有四种绑定的方式,但是在确定到底是哪种绑定之前必须先找到函数的调用位置.接下来先介绍其中的三种: 1.默认绑定 其实所谓的默认绑定就是函数直接调用(前面没有什么东西来点它),在默 ...

  7. 爬虫学习（十四）——xpath项目实践

    import osimport timeimport urllib.requestimport urllib.parsefrom lxml import etree # 构建面向对象的代码方式clas ...

  8. Maven - 依赖范围<scope></scope>

    6种:

  9. JAVAOOP异常

    排序: Try-catch-finally:try正常执行,如果有异常执行catch后执行finally,如果没有直接执行finally 执行顺序:try-catch:try中的语句正常执行,如果遇到 ...

  10. 【jQuery】输入框自带清除按钮

    最近一个项目,需要在输入框时右边出现“X”标志,点击X即可清空,主要使用了click和blur事件,难点在于点击‘X’时,input框获得焦点时出现“X”标志,而点击"x"标志时i ...