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

1、FileReader接口的方法

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

方法名: 参数: 描述:
readAsDataURL file 将文件读取为DataURL(一般读取图片)
readAsText ile,[encoding] 将文件读取为文本
readAsBinaryString file 将文件读取为二进制编码
abort (none) 终端读取操作

2、FileReader接口事件

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

3、FileReader接口的使用

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

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

    <div id="out"></div>

    <img src="" alt="" id="img">

    <script>

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

        var out = document.getElementById('out');//文件展示的1地方

        var img = document.getElementById('img');//图片显示的地方

        file.onchange = function(event){ //监听文件的改变

            var file = event.target.files[0]; //获取到文件的所有信息

            console.log(file)

            var type = 'defautl';

            var reader = new FileReader(); //new一个文件读取的对象（首先要判断你的浏览器是否支持这个方法）

            //判断文件类型

            if(/image/.test(file.type)){ //判断文件的类型

                type = 'image' //图片

                reader.readAsDataURL(file);

            }else{

                type = 'text'; //其他非图片文件

                reader.readAsText(file);

            }
 

            reader.onload = function() { //成功的回调

                var html = '';

                switch(type){

                    case "image"://图片的显示

                        img.src = this.result;

                        break;

                    case "text"://文件的显示

                        html  = this.result;

                        out.innerHTML = html;

                        break;

                }

            }

        }

    </script>

</body>

</html>

4、FileReader效果展示

HTML5之FileReader的简易使用的更多相关文章

  1. 网站开发进阶(三十二)HTML5之FileReader的使用

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...

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

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

  3. HTML5 之 FileReader 的使用 （二） （网页上图片拖拽并且预显示可在这里学到） ［转载］

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...

  4. HTML5之FileReader的使用

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  5. html5使用FileReader上传图片

    客户端代码是网上找的,修改为.net代码. <html><head>    <meta charset="utf-8">    <titl ...

  6. HTML5 使用FileReader实现调用相册、拍照功能

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  7. HTML5 通过 FileReader 实现文件上传

    概述 在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...

  8. [转] HTML5之FileReader的使用

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  9. HTML5之FileReader的使用.RP

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

随机推荐

  1. 新手入门Sqlalchemy

    此文已由作者尤炳棋授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 入职考拉半年多,一直在从事KLQA平台的开发,KLQA平台后端是用基于python的flask框架搭建的.F ...

  2. 常用模块（数据序列化 json、pickle、shelve）

    本节内容 前言 json模块 pickle模块 shelve模块 总结 一.前言 1. 现实需求 每种编程语言都有各自的数据类型,其中面向对象的编程语言还允许开发者自定义数据类型(如:自定义类),Py ...

  3. 孤荷凌寒自学python第七十一天开始写Python的第一个爬虫

    孤荷凌寒自学python第七十一天开始写Python的第一个爬虫 (完整学习过程屏幕记录视频地址在文末) 在了解了requests模块和BeautifulSoup模块后,今天开始真正写一个自己的爬虫代 ...

  4. [USACO18DEC]Fine Dining

    题面 \(Solution:\) 一开始想的是先跑一遍最短路,然后拆点之后再跑一遍,比较两次dis,然后发现拆点后会有负环(可能是我没想对拆点的方法),于是就放弃了拆点法. 我们考虑强制让每头牛选择走 ...

  5. LINQ学习笔记——（3）基本查询操作符

    Select() 作用于uIEnumerable<TSource>类型 public static void Test() { List<string> persons = n ...

  6. memcached的认识

    <?php /* memcached概念: Memcached是一个免费开源的,高性能的,具有分布式对象的缓存系统,它可以用来保存一些经常存取的对象或数据,保存的数据像一张巨大的HASH表,该表 ...

  7. poj1789 Truck History最小生成树

    Truck History Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 20768   Accepted: 8045 De ...

  8. lintcode-86-二叉查找树迭代器

    86-二叉查找树迭代器 设计实现一个带有下列属性的二叉查找树的迭代器: 元素按照递增的顺序被访问(比如中序遍历) next()和hasNext()的询问操作要求均摊时间复杂度是O(1) 样例 对于下列 ...

  9. 201621123033 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 2 ...

  10. laydate日期控件

    <!-- laydate 日期时间控件 下载地址 http://www.layui.com/laydate/ 这里用到版本为 layDate-v5.0.2 下载后将 laydate 文件夹放到项 ...