HTML5 FileReader接口学习笔记

1、FileReader概述

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

其中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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

Spring Boot 最佳实践(四)模板引擎Thymeleaf集成

Thymeleaf是一种Java XML / XHTML / HTML5模板引擎,可以在Web和非Web环境中使用。它更适合在基于MVC的Web应用程序的视图层...

1512
来自专栏菜鸟计划

angularjs 表单验证

一、常用的表单验证指令  1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="te...

2857
来自专栏Janti

springboot学习笔记-thymeleaf

简单说, Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。相较与其他的模板引擎,它有如下三个极吸...

582
来自专栏LeoXu的博客

Tapestry 教程(四)探索项目结构 原

l Web应用程序文件放在 src/main/webapp(包括src/main/webapp/WEB-INF)

542
来自专栏前端侠2.0

Angular技巧汇总 原

    声明项目的全局类型,同时不需要在各个Ts文件中import {XXX} from 'xxx'  ,就能直接引用!方法是:

712
来自专栏大内老A

一个简单的小程序演示Unity的三种依赖注入方式

今天写《WCF技术剖析(卷2)》关于《WCF扩展》一章,举了“如何通过WCF扩展实现与IoC框架(以Unity为例)集成”(《通过自定义ServiceHost实...

2716
来自专栏大内老A

ASP.NET MVC Model元数据及其定制: 初识Model元数据

Contronoller激活之后,ASP.NET MVC会根据当前请求上下文得到目标Action的名称,然后解析出对应的方法并执行之。在整个Action方法的执...

1809
来自专栏小古哥的博客园

读书笔记-JavaScript面向对象编程(三)

第7章 浏览器环境 7.1 在HTML页面中引入JavaScript代码 7.2概述BOM与DOM(页面以外事物对象和当前页面对象) 7.3 BOM   7.3...

3426
来自专栏跟着阿笨一起玩NET

EF 通用数据层类

转载:http://www.cnblogs.com/yq-Hua/p/4165344.html

862
来自专栏Golang语言社区

厚土Go学习笔记 | 33. 利用数据流实现密码代换功能

利用 go 语言的 io.Reader 包裹另一个 io.Reader 的模式,修改数据流中的字符串(密码)代换功能。 提供一个字母和数字组合的字符串,对这个字...

36912

扫码关注云+社区