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

相关文章

来自专栏Objective-C

Xcode8.0 控制台打印输出问题

39570
来自专栏CRPER折腾记

Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)

不推荐完全copy过去,可以看看我是如何针对我这边业务; 做的一个axios的封装及实现的思路

51520
来自专栏Danny的专栏

机房收费系统(VB.NET)——超详细的报表制作过程

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

28330
来自专栏前端布道

Angular开发实践(六):服务端渲染

Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是 Angular Universal(统一平台),一项在服务...

652100
来自专栏python学习之旅

Python+Selenium笔记(十一):配置selenium Grid

(一) 前言 Selenium Grid可以将测试分布在若干个物理或虚拟机器上,从而实现分布方式或并行方式执行测试。 这个链接是官方的相关说明。 https:/...

50170
来自专栏挖坑填坑

Angular练习

1、安装node.js(其自带npm) 2、安装angular/cli 3、使用angular/cli构建项目参考这篇文章

13550
来自专栏JetpropelledSnake

Django学习笔记之django-debug-toolbar使用指南

22760
来自专栏数据小魔方

R语言笔记之——常用数据导入方式简介

因为之前旁听过几节R语言的课程,再加上自己练习数据可视化的需要(特别是可视化包——“ggplot2”),学了些R语言的皮毛。 总觉得基础没打牢,好高骛远、急于求...

34470
来自专栏技术博文

sublime text2快捷键的使用

1. 文件快速导航:  这是sublime上面很好用的功能之一, ctrl+p可以调出窗口,菜单上的解释是gotoanythings ,确实如其所言,调出窗口后...

38560
来自专栏程序员的诗和远方

tips-解决base标签造成SVG效果失效

之前写了使用SVG实现一个骚气的圆环: 一个比想象中更骚气的圆-svg实现。后来上线过程中发现渐变的效果出不来,原来是html base标签和内联SVG同时使用...

31850

扫码关注云+社区

领取腾讯云代金券