FileReader对象采用异步方式读取文件，在不同的读取阶段会触发不同的事件。

事件列表:

（1）.abort事件：读取中断或调用reader.abort()方法时触发。

（2）.error事件：读取出错时触发。

（3）.load事件：读取成功后触发。

（4）.loadend事件：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。

（5）.loadstart事件：读取将要开始时触发。

（6）.progress事件：读取过程中周期性触发。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
var h = {
  init: function () {
    var _this = this;
 
    document.getElementById("File").onchange = _this.fileHandler;
    document.getElementById("Abort").onclick = _this.abortHandler;
 
    _this.status = document.getElementById("Status");
    _this.progress = document.getElementById("Progress");
    _this.percent = document.getElementById("Percent");
 
    _this.loaded = 0;
    //每次读取1M 
    _this.step = 1024 * 1024;
    _this.times = 0;
  },
  fileHandler: function (e) {
    var _this = h;
    _this.file = this.files[0];
    _this.reader = new FileReader();
 
    _this.total = _this.file.size;
 
    _this.reader.onloadstart = _this.onLoadStart;
    _this.reader.onprogress = _this.onProgress;
    _this.reader.onabort = _this.onAbort;
    _this.reader.onerror = _this.onerror;
    _this.reader.onload = _this.onLoad;
    _this.reader.onloadend = _this.onLoadEnd;
    //读取第一块 
    _this.readBlob(0);
  },
   
  readBlob: function (start) {
    var _this = h;
 
    var blob,
        file = _this.file;
 
    _this.times += 1;
 
    blob = file.slice(start, start + _this.step + 1);
    _this.reader.readAsText(blob);
  },
 
  onLoadStart: function () {
    console.log("读取将要开始");
    var _this = h;
  },
 
  onProgress: function (e) {
    console.log("正在进行读取");
    var _this = h;
    _this.loaded += e.loaded;
    //更新进度条 
    _this.progress.value = (_this.loaded / _this.total) * 100;
  },
 
  onAbort: function () {
    console.log("读取中断");
    var _this = h;
  },
  onError: function () {
    console.log("读取中断");
    var _this = h;
  },
 
  onLoad: function () {
    console.log("读取完成");
    var _this = h;
 
    if (_this.loaded < _this.total) {
      _this.readBlob(_this.loaded);
    } else {
      _this.loaded = _this.total;
    }
  },
 
  onLoadEnd: function () {
    console.log("读取结束");
    var _this = h;
  },
   
  abortHandler: function () {
    var _this = h;
 
    if (_this.reader) {
      _this.reader.abort();
    }
  }
};
 
window.onload = function () {
  h.init();
}
</script>
</head>
<body>
<form>
  <fieldset>
    <legend>分度读取文件：</legend>
    <input type="file" id="File" />
    <input type="button" value="中断" id="Abort" />
    <p>
      <label>读取进度：</label>
      <progress id="Progress" value="0" max="100"></progress>
    </p>
    <p id="Status"></p>
  </fieldset>
</form> 
</body>
</html>

上面是一个完整的演示代码，读取较大的文件演示效果更佳明显，文件是分段上传的。

控制台截图如下:

出处：http://www.softwhy.com/article-8816-1.html

http://www.softwhy.com/article-9805-1.html

FileReader 事件用法的更多相关文章

  1. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  2. jQuery event,冒泡,默认事件用法

    jQuery event,冒泡,默认事件用法 <%@ page language="java" import="java.util.*" pageEnco ...

  3. repeater的command事件用法

    当Repeater里面循环控件时就会用到command, 是Repeater控件的原生事件用法 Repeater里面如果循环控件,控件的ID是会被改变的 repeater.itemcommand+= ...

  4. jquery get ($.get) 事件用法与分析

    jquery get ($.get) 事件用法与分析 get() 方法通过远程 HTTP GET 请求载入信息.这是一个简单的 GET 请求功能以取代复杂 $.ajax .请求成功时可调用回调函数.如 ...

  5. JS事件用法

    1.常用事件理解

  6. jquery load ($.load) 事件用法与分析(转)

    首先我们需要清楚的是jquery load方法是对jQuery.ajax()进行封装以方便我们使用的一个方法,当我们需要处理较为复杂的逻辑时候,还是需要用到jQuery.ajax()这个比较全面的方法 ...

  7. JavaScript onblur 和 onkeyup事件用法

    1.onblur表示失去焦点的时候被调用: 2.onkeyup表示键盘每输入完一个字符之后发生.简单来讲,就是键盘上的按键被放开的时候触发. 例子: <!DOCTYPE HTML PUBLIC ...

  8. javascript中window.event事件用法详解

    转自http://www.jb51.net/article/32564.htm描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生 ...

  9. js onblur 和 onkeyup 事件用法

    1. onblur 表示失去焦点时触发 2. onkeyup 表示键盘每输完一个字符之后触发,就是键盘上的按键被放开时. 例子如下: <!DOCTYPE HTML PUBLIC "-/ ...

随机推荐

  1. Finalizer 导致的OOM

    本文介绍的是Java里一个内建的概念,Finalizer.你可能对它对数家珍,但也可能从未听闻过,这得看你有没有花时间完整地看过一遍java.lang.Object类了.在java.lang.Obje ...

  2. 【操作系统之四】Linux常用命令之awk

    一.概念awk是一个报告生成器,拥有强大的文本格式化能力. 数据可以来自标准输入(stdin).一个或多个文件,或其它命令的输出: 依次对每一行进行处理,然后输出: 它在命令行中使用,但更多是作为脚本 ...

  3. Lab3：虚拟内存管理

    前言 虚拟内存是计算机系统内存管理的一种技术.它使得应用程序认为它拥有连续的可用的内存(一个连续完整的地址空间),而实际上,它通常是被分隔成多个物理内存碎片,还有部分暂时存储在外部磁盘存储器上,在需要 ...

  4. 用简单的JS代码制作计算器

    代码+注释一共不到200行,是练习交流的必备良药 主界面如下: 操作示意图: 以下是代码部分 HTML: <div> <table class="window"& ...

  5. golang gRPC(持续更新)

    如何开启 gRPC 日志 设置 GRPC_GO_LOG_SEVERITY_LEVEL 环境变量, 可选项:["info", "warning", "e ...

  6. 59 网络编程（一）——端口与InetSocketAddress

    端口与几个CMD命令 公认端口:0-1023 比如80端口分配给www,21端口分配给FTP等 注册端口:2014-49151  分配给用户进程或引用程序 动态/私有端口:49151-65535 需要 ...

  7. 一个萝卜一个坑#我的C坑_两局变量

    前面的笔记慢慢补 全局变量和局部变量的区别: 1.首字母 尽量不用全局变量原因: 1.占内存 2.降低通用性和可靠性 3.降清晰度 若在同一源文件中,全局变量和局部变量同名,记住很重要的一条:实参决定 ...

  8. TJOI2018简要题解

    Day1T1数学计算 按照时间轴建一棵线段树即可,复杂度为\(O(m \log m)\) #include <bits/stdc++.h> #define N 100005 #define ...

  9. 『金字塔 区间dp』

    金字塔 Description 虽然探索金字塔是极其老套的剧情,但是这一队 探险家还是到了某金字塔脚下.经过多年的研究,科 学家对这座金字塔的内部结构已经有所了解.首先, 金字塔由若干房间组成,房间之 ...

  10. 基于Jquery的下拉列表控件(个人觉得实用)

    Selectize.js Selectize 是一个基于 jQuery 的 <select> UI 控件,对于标签选择和下拉列表功能非常有用. Selectize 的目标是通过简单而强大的 ...