FileReader用来把文件读入内存，并且读取文件中的数据。
FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。

1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，结果存储在result属性中。

FileReader接口的方法
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 中断读取操作

2、FileReader接口的事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

FileReader接口的事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成，无论成功失败

3、FileReader接口的使用

<!DOCTYPE html>

<html>

    <head>

        <title>FileReader接口</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <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="myResult"></div>

    </body>

    <script type="text/JavaScript">

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

        if(typeof FileReader == 'undefined'){

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

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

            myResult.InnerHTML = "你的浏览器不支持FileReader接口！";

            //使选择控件不可操作

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

        }

        function readAsDataURL(){

            //检验是否为图像文件

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

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

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

                return false;

            }

            var reader = new FileReader();

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

            reader.readAsDataURL(file);

            reader.onload = function(e){

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

                myResult.innerHTML = "";

                //显示读取结果

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

            }

        }

        function readAsBinaryString(){

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

            var reader = new FileReader();

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

            reader.readAsBinaryString(file);

            reader.onload=function(f){

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

                myResult.innerHTML = "";

                //显示读取结果

                myResult.innerHTML = this.result;

            }

        }

        function readAsText(){

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

            var reader = new FileReader();

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

            reader.readAsText(file);

            reader.onload=function(f){

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

                myResult.innerHTML = "";

                //显示读取结果

                myResult.innerHTML = this.result;

            }

        }

    </script>

</html>

HTML5之FileReader文件读取接口的更多相关文章

  1. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

  2. FileReader文件读取API

    :用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 1.FileReader接口的方法 Fi ...

  3. jmeter接口性能测试【CSV文件读取+接口关联+设置集合点】

    一.前言 周计划上安排了个接口性能测试的任务,便开始了职业生涯的第一个接口性能测试... 接口进行压测之前,首先需要调通脚本.有两种方式,一种是通过抓包工具(如fiddler)抓取业务接口:另一种是通 ...

  4. 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  6. HTML5 之 FileReader 方法上传并读取文件

    原文地址:https://caochangkui.github.io/file-upload/ HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据 ...

  7. html5中利用FileReader来读取文件。

    利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...

  8. FileReader：读取本地图片文件并显示

    最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...

  9. 前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输

    HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...

随机推荐

  1. 数据导入Excel时，出现ole error 800AC472这个错误，怎么解决。

    我也出现过这个问题 在生成报表的时候不要动EXCEL中的任何单元格 让它完成保存就可以了 或者是把office 2003 删除下载一个office 2000就可以解决 据说是版本兼容的问题 不是高手 ...

  2. 十三、Visitor 访问者设计模式

    需求:将数据结果与处理分开 设计原理: 代码清单: Element public interface Element { void accept(Visitor visitor); } Entry p ...

  3. day43 多表查询和pymysql

    复习 增删改查全语法 # 增 insert into db1.t1(字段2, 字段1, ..., 字段n)|省略 values (值2, 值1, ..., 值n)|(值1, 值2, ..., 值n)[ ...

  4. mysql学习笔记--列属性

    一.是否为空----null || not null 二.默认值----default 三.自动增长----auto_increment 四.主键----primary key 1. 主键:唯一标识表 ...

  5. mysql 报错You can't specify target table 'wms_cabinet_form' for update in FROM clause

    这个错误是说从t表select出来的无法又更新t表. 可以在select的时候先取个别名,弄个临时表即可.

  6. [leetcode]88. Merge Sorted Array归并有序数组

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note: T ...

  7. ES6 Number

    1. 新增Number.EPSILON(误差检查函数)

  8. vue-computed计算属性

    计算属性:用来封装你想对一个属性进行的操作 computed VS mothod实现的效果和定义一个methods中的function相同,但是他们的区别在于:methods的function当触发重 ...

  9. python程序编写简介

    语句和语法 # 注释 \ 转译回车,继续上一行,在一行语句较长的情况下可以使用其来切分成多行,因其可读性差所以不建议使用 : 将两个语句连接到一行,可读性差,不建议使用 : 将代码的头和体分开 语句( ...

  10. C++学习札记（3）

    一边听着许巍的音乐,一遍学习着C++的精髓,这感觉这酸爽,我一个人体会和知道. 许巍是两代人共同的时代标志,他的音乐作品脍炙人口,堪称经典,经久不衰:此时此刻品味,依然有丰富的各种味道和感情.可能因为 ...