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

相关文章

来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

4798
来自专栏杨龙飞前端

scrollto 到指定位置

2484
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5286
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2667
来自专栏落花落雨不落叶

canvas画简单电路图

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

c#实现打印功能

2612
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

2888
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2102
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6578

扫码关注云+社区