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. 二叉搜索树实现MAP

    二叉搜索树的基本实现. /* Date: 2014-04-29 purpose: An implementation of MAP using binary search tree. */ #ifnd ...

  2. IOS 打开照相机 打开相册

    /** * 打开照相机 */ - (void)openCamera { if (![UIImagePickerController isSourceTypeAvailable:UIImagePicke ...

  3. robotframework实战一

    1.环境 1.Robotframework 安装环境,见以下帖子,只要保证python安装成功,安装了python的pip,就可以使用pip一路安装下去了.以下帖子也有基础的操作,帖子路径 http: ...

  4. unixbench安装及使用

    unixbench 是一个用于測试 unix 系统性能的工具.也是一个比較通用的 benchmark, 此測试的目的是对类Unix 系统提供一个主要的性能指示,非常多測试用于系统性能的不同方面,这些測 ...

  5. Poj(1182),种类并查集

    题目链接:http://poj.org/problem?id=1182 再次熟练种类并查集,又积累点经验,和技巧,rank 0 2 1 先计算father[x] ,再更新rank[x]; #inclu ...

  6. 有权并查集，Poj(1988)

    题目链接:http://poj.org/problem?id=1988 题目大意: 有n个从1到n编号的箱子,将每个箱子当做一个栈,对这些箱子进行p次操作,每次操作分别为以下两种之一: 输入 M x ...

  7. Design and Implementation of Global Path Planning System for Unmanned Surface Vehicle among Multiple Task Points

    Design and Implementation of Global Path Planning System for Unmanned Surface Vehicle among Multiple ...

  8. VisualSVN 4.0.10 破解版 附上破解过程

    VisualSVN一般情况下使用不需要破解,可以直接使用社区授权.但是社区授权不支持域用户. 如果要再域下面使用就需要破解了. 原版的VisualSVN和破解后的DLL已打包上传(仅供学习使用) 破解 ...

  9. 使用android ndk编译x86 so在linux下使用的问题

    一直以为android ndk编译x86 so库可以在linxu下运行,结果我试了几次都行不通.后来想了一下,android ndk编译的库应该只能在android设备或模拟器上运行才有效,后来改用 ...

  10. linux下 利用 rz 命令上传文件

    1. 如何安装? 1)编译安装  root 账号登陆后,依次执行以下命令: # cd /tmp # wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20 ...