FileReader API链接地址：https://developer.mozilla.org/en-US/docs/Web/API/FileReader

实例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <title>File</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<script type="text/javascript">

    var result = document.getElementById("result");

    var file = document.getElementById("file");

    //判断浏览器是否支持FileReader接口

    if (typeof FileReader == 'undefined') {

        result.InnerHTML = "<p>你的浏览器不支持FileReader接口！</p>";

        //使选择控件不可操作

        file.setAttribute("disabled", "disabled");

    }

    function readAsDataURL() {

        //检验是否为图像文件

        var file = document.getElementById("file").files[0];

        if (!file) {

            alert('请选择文件！');

        }

        if (!/image\/\w+/.test(file.type)) {

            alert("看清楚，这个需要图片！");

            return false;

        }

        var reader = new FileReader();

        //将文件以Data URL形式读入页面

        reader.readAsDataURL(file);

        reader.onload = function (e) {

            var result = document.getElementById("result");

            //显示文件

            result.innerHTML = '<img src="' + this.result + '" alt="" />';

        }

    }

    function readAsBinaryString() {

        var file = document.getElementById("file").files[0];

        if (!file) {

            alert('请选择文件！');

        }

        var reader = new FileReader();

        //将文件以二进制形式读入页面

        reader.readAsBinaryString(file);

        reader.onload = function (f) {

            var result = document.getElementById("result");

            //显示文件

            result.innerHTML = this.result;

        }

    }

    function readAsText() {

        var file = document.getElementById("file").files[0];

        if (!file) {

            alert('请选择文件！');

        }

        var reader = new FileReader();

        //将文件以文本形式读入页面

        reader.readAsText(file, 'UTF-8');

        reader.onload = function (f) {

            var result = document.getElementById("result");

            //显示文件

            result.innerHTML = this.result;

        }

    }

</script>

<body>

    <p>

        <label>请选择一个文件：</label>

        <input type="file" id="file" />

        <input type="button" value="读取图像" onclick="readAsDataURL()" />

        <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />

        <input type="button" value="读取文本文件" onclick="readAsText()" />

    </p>

    <div id="result" name="result"></div>

</body>

</html>

运行效果：

1）读取图像

2）读取二进制

3）读取文本

FileReader笔记的更多相关文章

  1. js FileReader 笔记

    以上传图片为例 通过input type='file' 上传完成图片后,获取图片 $('#input').files[0] var reader = new FileReader();    read ...

  2. Java基础知识强化之IO流笔记37：FileReader/FileWriter（转换流的子类）复制文本文件案例

    1. 转换流的简化写法: 由于我们常见的操作都是使用本地默认编码,所以,不用指定编码.而转换流的名称有点长,所以,Java就提供了其子类供我们使用:FileReader / FileWriterOut ...

  3. Java笔记--File,FileInputStream,FileReader,InputStreamReader,BufferedReader 的使用和区别

    转自:http://hi.baidu.com/danghj/item/0ef2e2c4ab95af7489ad9e39 参考资料:  < core java > 12 章 使用 Java ...

  4. HTML5 FileReader接口学习笔记

    1.FileReader概述 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中F ...

  5. IO流学习笔记（一）之FileWriter与FileReader

    IO流用来处理设备之间的数据传输 Java对数据的操作是通过流的方式 Java用于操作流的对象都在IO包中 流按照操作数据分为两种:字节流和字符流 流按流向分为:输入流和输出流 输入流和输出流是相对于 ...

  6. 瘋耔java语言笔记

    一◐ java概述                                                                                        1.1 ...

  7. TJI读书笔记16-异常处理

    TJI读书笔记16-异常处理 概念 基本异常情形 异常的捕获 自定义异常 异常说明 捕获所有异常 栈轨迹 重新抛出异常 Java标准异常 使用finally 异常的限制 构造器 异常的匹配 其他乱七八 ...

  8. Java基础复习笔记系列 七 IO操作

    Java基础复习笔记系列之 IO操作 我们说的出入,都是站在程序的角度来说的.FileInputStream是读入数据.?????? 1.流是什么东西? 这章的理解的关键是:形象思维.一个管道插入了一 ...

  9. 20145213《Java程序设计学习笔记》第六周学习总结

    20145213<Java程序设计学习笔记>第六周学习总结 说在前面的话 上篇博客中娄老师指出我因为数据结构基础薄弱,才导致对第九章内容浅尝遏止地认知.在这里我还要自我批评一下,其实我事后 ...

随机推荐

  1. Arduino nano的bootloader文件烧录

    1.买了了nano还没用就用 avrisp烧录器给烧了其他程序,仅仅是的avr单片机了:2.将他恢复成Arduino nano吧. 在Arduino软件安装目录中的hardware\arduino中. ...

  2. oracle数据泵导出导入

    先创建一个目录:比如 Create  or Replace directory  DATA_PUMP_DIR as 'D:\DataPipe';   然后给导入导出的用户赋权限: Grant read ...

  3. 记--linux 下svn安装配置，同步web目录

    安装#yum install subversion 1.创建版本库 # svnadmin create /svn/project 2.配置svn服务的配置文件svnserver.conf文件 anon ...

  4. POJ 1330 LCA最近公共祖先 离线tarjan算法

    题意要求一棵树上,两个点的最近公共祖先 即LCA 现学了一下LCA-Tarjan算法,还挺好理解的,这是个离线的算法,先把询问存贮起来,在一遍dfs过程中,找到了对应的询问点,即可输出 原理用了并查集 ...

  5. ubuntu18.04 基于Hadoop3.1.2集群的Hbase2.0.6集群搭建

    前置条件: 之前已经搭好了带有HDFS, MapReduce,Yarn 的 Hadoop 集群 链接: ubuntu18.04.2 hadoop3.1.2+zookeeper3.5.5高可用完全分布式 ...

  6. 实验吧-杂项-你知道他是谁吗？(转盘密码、NTFS数据流检测及导出)

    刚看到的时候听懵,没注意到重点,其实很多时候题目中的细节就是给我们线索的,所以审题和思考是很重要的. 在没做到点上的是,也做了一点努力,没有效果,科普一下这个人((*^▽^*))图片上是托马斯.杰斐逊 ...

  7. 吴裕雄--天生自然C++语言学习笔记：C++ 多态

    多态按字面的意思就是多种形态.当类之间存在层次结构,并且类之间是通过继承关联时,就会用到多态. C++ 多态意味着调用成员函数时,会根据调用函数的对象的类型来执行不同的函数. 下面的实例中,基类 Sh ...

  8. Cobalt Strike简单使用（9,29第十五天）

    本文转自:https://www.cnblogs.com/yuanshu/p/11616657.html 一.介绍: 后渗透测试工具,基于Java开发,适用于团队间协同作战,简称“CS”. CS分为客 ...

  9. java反射的学习

    1.类的 类类型(ClassType) 类的类类型可以用来做很多事,我们可以通过它获取到类的名称,类的路径,类的成员变量,类的方法等等,还可以通过它获得类的实例化对象. 我们可以通过 类名.class ...

  10. Day3-T4

    原题目 Describe:有点恶心的DP+最短路 code: #include<bits/stdc++.h> using namespace std; long long A,B,C,z, ...