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 条评论
登录 后参与评论

相关文章

来自专栏nummy

使用jsTree树形控件【4】

使用JSON渲染jsTree的话,需要指定JSON的格式,jsTree可以使用两种JSON格式,在标准JSON格式中,没有必需的属性,而且还可以添加自定义的属性...

571
来自专栏程序员互动联盟

【专业技术】Android webkit处理汉字编码问题

在XX项目中解决android webkit处理汉字编码问题的总结 1.问题: 服务器通过302重定向方式发送给客户端重定向地址,地址中的汉字采用原数据方式发送...

3076
来自专栏Albert陈凯

2018-06-13 使用stream批量处理List内数据

1208
来自专栏MasiMaro 的技术博文

ghost.py在代用JavaScript时的超时问题

在写爬虫的时候,关于JavaScript的解析问题,我在网上找到的一个解决方案是使用ghost.py这个模块,他是一个基于webkit封装的一个客户端,可以用来...

602
来自专栏技术博文

jQuery插件 -- Form表单插件jquery.form.js

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- aj...

3655
来自专栏源哥的专栏

XML文件解析

在现在很多采用java开发的基于b/s结构的系统中,经常将一些配置参加放到一个xml文件中,然后在这个文件中取参数,这样减少了hard code的情况。下面这个...

472
来自专栏xingoo, 一个梦想做发明家的程序员

Oozie分布式工作流——从理论和实践分析使用节点间的参数传递

Oozie支持Java Action,因此可以自定义很多的功能。本篇就从理论和实践两方面介绍下Java Action的妙用,另外还涉及到oozie中actio...

2375
来自专栏爱撒谎的男孩

用户管理模块之用户注册

2475
来自专栏专注 Java 基础分享

Struts2框架的基本使用(三)

     上篇 Struts2框架的基本使用(二)介绍了Action和result的相关配置操作,本篇接着介绍剩下的异常处理机制和Convention插件的使用...

1827
来自专栏Pythonista

python操作redis

redis是一个key-value存储系统。和Memcached类似,它支持存储的value类型相对更多,包括string(字符串)、list(链表)、set(...

571

扫描关注云+社区