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. 基于Mybatis的Dao层开发

    转自:https://www.cnblogs.com/rodge-run/p/6528398.html 基于Mybatis的Dao层开发 SqlSessionFactoryBuilder用于创建 Sq ...

  2. Nginx+Tomcat+memcached高可用会话保持

    Nginx+Tomcat+memcached高可用会话保持 文章来源dyc2005   一.概述 之前文章已经描述了企业高可用负载相关的架构及实现,其中常用的nginx或haproxy,LVS结合ke ...

  3. Hubtown(最大流)

    Hubtown 时间限制: 1 Sec  内存限制: 128 MB提交: 23  解决: 11[提交] [状态] [讨论版] [命题人:admin] 题目描述 Hubtown is a large N ...

  4. 安装juicer

    由于我第一次安装 JUICER时遇到了很多问题,现在把这些问题都记录下来,给同样第一次安装使用的同学一点借鉴. 前面已经安装了Torch3和Tracter,这都是为安装Juicer做的准备,现在安装J ...

  5. mayan 游戏真是毒瘤

    如题 真坑呀!!! 可算过了 我率先达到了氧气富有化 先是改变时没有fall.40分 然后是fall函数写慢了 tle 50分 . 上代码 #include<cstdio> #includ ...

  6. Django 单元测试

    mock 测试 mock 是辅助单元测试的模块,用于测试不方便调用的别人的接口.举个简单的例子,比如说,我们测试django 写的微信登录接口,正常流程下,我们需要前端拉起授权窗口,获取jscode或 ...

  7. iOS网络图片缓存详解

    在开发移动应用的时候比如Android,IOS,因为手机流量.网速.内存等这些因素,当我们的移动应用是针对互联网,并要频繁访问网络的话,对网络优化这块就显得尤为重要了. 比如某个应用要经常显示网络图片 ...

  8. Python 统计不同url svn代码变更数

    #!/bin/bash/python # -*-coding:utf-8-*- #svn统计不同url代码行数变更脚本,过滤空行,不过滤注释. import subprocess,os,sys,tim ...

  9. nuxt generate静态化后回退问题

    之前线上的项目是nuxt build后的项目发布在服务器上,pm2来管理node的进程,nuxt还是运行在node的环境里. 这个方案用了半年左右,访问速度什么的确实很快,pm2管理下的node在wi ...

  10. JZOJ 5914. 盟主的忧虑

    Description     江湖由 N 个门派(2≤N≤100,000,编号从 1 到 N)组成,这些门派之间有 N-1 条小道将他们连接起来,每条道路都以“尺”为单位去计量,武林盟主发现任何两个 ...