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. spark 资源动态分配

    'spark.shuffle.service.enabled': 'true', 'spark.dynamicAllocation.enabled': 'false', , , , 'spark.sq ...

  2. 【转帖】nmap命令总结

    nmap命令总结 https://www.cnblogs.com/chenqionghe/p/10657722.html 一.nmap是什么 nmap是一款网络扫描和主机检测的非常有用的工具,不局限于 ...

  3. TestNG系列（一）TestNG+Eclipse环境配置

    前提 1.JDK的安装与环境变量的配置 2.Eclipse的下载与安装 以上这些是基础中的基础,不再详细介绍. Eclipse安装TestNG插件 打开eclipse--->help---> ...

  4. C#读写调整UVC摄像头画面-饱和度

    有时,我们需要在C#代码中对摄像头的饱和度进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄 ...

  5. gitblit服务器：用户、团队、权限管理

    在日常开发工作中,我们通常使用版本控制软件管理团队的源代码,常用的SVN.Git.与SVN相比,Git有分支的概念,可以从主分支创建开发分支,在开发分支测试没有问题之后,再合并到主分支上去,从而避免了 ...

  6. scarpy设置日志打印级别和存储位置

    在settings.py中配置 日志级别设置 LOG_LEVEL = 'ERROR' # 当LOG_LEVEL设置为ERROR时,在进行日志打印时,只是打印ERROR级别的日志 日志存储设置 LOG_ ...

  7. Java自学-类和对象 传参

    Java中的传参 变量有两种类型 基本类型 和类类型 参数也是变量,所以传参分为 基本类型传参 类类型传参 步骤 1 : 基本类型传参 基本类型传参 在方法内,无法修改方法外的基本类型参数 publi ...

  8. 《SAP微顾问和大数据 》公众号管理课程清单

    互联网商业模式创新 电子商务与传统企业转型 “一带一路”信息化:格局与对策 “一带一路”沿线国家主权信用及风险防范 大数据下的资源整合和知识共享 地产数字化改革的痛点与处方 携手共建“一带一路” 数字 ...

  9. Nginx中的$document_uri与$request_uri以及$http_referer

    Nginx基于$document_uri的访问控制,变量$document_uri该变量等价于$uri,其实也等价于location匹配. 示例1: 当用户请求的url中包含/admin/时,直接返回 ...

  10. 微信小程序必知相关知识

    微信小程序必知相关知识 1 请谈谈微信小程序主要目录和文件的作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验: App.js 设置一些全局的基础数 ...