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. Centos 5.2下安装多个mysql数据库

    一.编译安装第一个MySQL 5.1.33 cd /opt/usr/sbin/groupadd mysql/usr/sbin/useradd -g mysql mysql -s /bin/nologi ...

  2. 【转】Mac 程序员的十种武器

    http://chijianqiang.baijia.baidu.com/article/3733 上 在写 Mac 程序员的十个武器之前,我决定先讲一个故事,关于 Mac 和爱情的.(你们不是问 M ...

  3. 图像上采样(图像插值)增取样（Upsampling）或内插（Interpolating）下采样(降采样)，

    缩小图像(或称为下采样(subsampled)或降采样(downsampled))的主要目的有两个:1.使得图像符合显示区域的大小:2.生成对应图像的缩略图.放大图像(或称为上采样(upsamplin ...

  4. 第36章 SDIO—SD卡读写测试—零死角玩转STM32-F429系列

    第36章     SDIO—SD卡读写测试 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/f ...

  5. javascript入门笔记9-认识DOM

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分 ...

  6. Java中使用webSocket

    Java中使用webSocket package com.yaoqi.controller.message; import javax.websocket.*; import javax.websoc ...

  7. .NET领域驱动设计系列(12)

    [.NET领域驱动设计实战系列]专题十一:.NET 领域驱动设计实战系列总结 摘要: 一.引用 其实在去年本人已经看过很多关于领域驱动设计的书籍了,包括Microsoft .NET企业级应用框架设计. ...

  8. Lighting System Design UVA - 11400 动态规划

    题目:题目链接 思路:简单的动态规划问题,先把灯泡按照电压从小到大排序.设s[i]为前i种灯泡的总数量(即L值之和),d[i]为灯 泡1-i的最小开销,则d[i] = min{d[j] + (s[i] ...

  9. 笔记-flask基础操作

    笔记-flask基础操作 1.      前言 本文为flask基础学习及操作笔记,主要内容为flask基础操作及相关代码. 2.      开发环境配置 2.1.    编译环境准备 安装相关Lib ...

  10. Flume使用（案例分析）

    Flume官方文档 Usage: bin/flume-ng <command> [options]... commands: help display this help text age ...