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. 【操作系统之六】Linux常用命令之less

    一.概念less 工具也是对文件或其它输出进行分页显示的工具,是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more .tail更加的有弹性.在 more 的时候,我们并没有 ...

  2. MinGW g++.exe 编译 DLL 时,导出函数名带@的问题

    今天尝试用CodeBlocks写了一个简单的Dll,发现生成的 dll 文件导出的函数名后面都有一个 @xxx 从生成的 libDll2.def 中看到: EXPORTS DllMain@ @ Max ...

  3. ThreadPoolExecutor源码2

    public class ThreadPoolExecutor1 extends AbstractExecutorService1 { // 11100000000000000000000000000 ...

  4. 在电脑上部署网站lls 浏览器上访问

    在win7 上安装,首先是要进入lls中进行设置,这是第一种方法: 通过图形化的操作方式进行设置, 这个界面中的东西都比较重要,电脑出现问题的话一般在这都可以进行调整,程序和功能可以用来管理你安装的软 ...

  5. OpenCV 静态库 CMAKE 文件

    cmake_minimum_required(VERSION 3.12)project(computer_cv) set(CMAKE_CXX_STANDARD 11) find_package(Ope ...

  6. 9. Scala隐式转换和隐式值

    9.1 隐式转换 9.1.1 提出问题 先看一个案例演示,引出隐式转换的实际需要=>指定某些数据类型的相互转化 object boke_demo01 { def main(args: Array ...

  7. 物联网通讯协议:MQTT,CoAP,NB-IOT,RFID,BLUETOOTH,NFC

    一.按网络四层协议分类: NB-IoT,LORA,WIFI,蓝牙,zigbee,4G都是物理层的,这几个都需要芯片模组支持(硬件支持) 而MQTT,COAP,HTTP都是应用层协议,这些需要开发服务器 ...

  8. Flask-SQLAlchemy 与 SQL Alchemy 的区别、联系

    目录 一.SQL Alchemy 1. SQL Alchemy 基本操作 1.1 连接数据库 1.2 声明映射(建立数据库表的模型) 1.3 创建映射类的实例 1.4 创建会话 1.5 单表的增删改查 ...

  9. 整理：WPF中CommandBindings的用法

    原文:整理:WPF中CommandBindings的用法 目的:了解一下CommandBindings.InputBindings.ICommandSource中在WPF中扮演什么样的角色 Comma ...

  10. Unable to connect to HBase using Phoenix JDBC Driver

    Feb 01, 2017; 5:21pm Unable to connect to HBase using Phoenix JDBC Driver 9 posts Hi All,   I am try ...