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. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

  2. 【Gamma阶段】第五次Scrum Meeting

    [Gamma阶段]第五次Scrum Meeting 每日任务内容 今日工作任务 明日待完成任务 配合前端调整评论页面的样式 课程列表页针对移动端进行调整 戴荣 Gamma阶段后测试点样例编写 移除部分 ...

  3. 不让应用的日志输出到message文件中

    有时我们制定一个应用的日志输出到一个文件的时候例如: (百度了好久都百度不好,这里记录一下时间2015年12月7日16:28:39) local7.*                          ...

  4. JS数据结构第一篇---算法之复杂度判断

    1.算法:算法是解决特定问题求解步骤的描述,在计算机中表现为指令的有限序列,并且每条指令表示一个或多个操作. 那么一个怎样的算法才能称得上是好算法,也就是说有没有什么标准来评判一个算法的好坏? 在此之 ...

  5. jmeter 生成不重复的手机号

    String account = "${__time(yyyyMMdd,)}"+UUID.randomUUID().toString().split("-")[ ...

  6. 备忘录(Memento)模式

    备忘录模式又叫做快照模式或者Token模式. 备忘录对象是一个用来存储另一个对象内部状态的快照的对象.备忘录模式的用意是在不破坏封装的条件下,将一个对象的状态捕捉住,并外部化,存储起来,从而可以在将来 ...

  7. Sitecore 8.2 Admin用户帐户解锁

    如果您有权访问数据库,则可以使用SQL Management Studio运行以下查询来解锁您的sitecore管理员或任何其他用户帐户 : UPDATE aspnet_Membership SET  ...

  8. Centos 使用kubeadm安装Kubernetes 1.15.3

    本来没打算搞这个文章的,第一里面有瑕疵(没搞定的地方),第二在我的Ubuntu 18 Kubernetes集群的安装和部署 以及Helm的安装 也有安装,第三 和社区的问文章比较雷同 https:// ...

  9. git在使用push指令的时候产生的错误

    一.问题我们在使用git指令的时候往往会出现如下错误. $ git push -u origin master To https://github.com/pzq7025/ss-fly.git ! [ ...

  10. c#NAudio 录音功能实现

    在网上找了很多类似录音教程效果都不好,或根本不能录音,代码由网上借鉴修改(完整实现录音播放功能) 1.首先新建引用类  RecordController public class RecordCont ...