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. [技术博客]升级 API 面临的问题

    升级 API 面临的问题 我们使用的上一届的版本中,使用的底层的 安卓的 API 是 Android7.0 .在这一版本中,我们将 API进行了升级,为了更好的兼容新功能.(发送通知),我们在升级 A ...

  2. 【Kubernetes学习之三】Kubernetes分布式集群架构

    环境 centos 7 一.Kubernetes分布式集群架构1.Kubernetes服务注册和服务发现问题怎么解决的?每个服务分配一个不变的虚拟IP+端口, 系统env环境变量里有每个服务的服务名称 ...

  3. android webview 全屏100%显示图片

    这里引用 第三方类库 implementation 'org.jsoup:jsoup:1.10.2' 定义工具类 HtmlUtils import org.jsoup.Jsoup; import or ...

  4. eclipse.ini相关问题

    一般新装的eclipse,在eclipse.ini文件中,有设置默认的内存信息,如果你要开发一个大的项目或者导入大的项目,那么,eclipse就会时不时报出这样的错误:An internal erro ...

  5. 【转】用 async/await 来处理异步

    原文地址:https://www.cnblogs.com/SamWeb/p/8417940.html 昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简 ...

  6. selenium又一小坑 无法用XPATH直接获取属性值 需要使用.get_attribute(“href”)

    在使用selenium进行抓取url的时候,试图使用find_elements_by_xpath来获取. 因此想当然的直接使用XPATH的语法进行获取属性 事例缩略后xml结构如下 <div c ...

  7. 记一个Redis分布式事务锁

    package com.mall.common; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory. ...

  8. Ubiq:A Scalable and Fault-tolerant Log Processing Infrastructure

    Abstract 互联网应用通常会产生大量的时间日志需要进行分析和处理.本文介绍Ubiq的架构,它是一个分布式系统,用于处理不断增长的日志文件,具有可扩展性.高可用.低延迟的特性.Ubiq框架容忍基础 ...

  9. kubernetes支持local volume

    目录 local volume 创建一个storage class 静态创建PV 使用local volume PV 动态创建PV local volume kubernetes从1.10版本开始支持 ...

  10. 【题解】最长递增路径 [51nod1274]

    [题解]最长递增路径 [51nod1274] 传送门:最长递增路径 \([51nod1274]\) [题目描述] 一个可能有自环有重边的无向图,每条边都有边权.输入两个整数 \(n,m\) 表示一共 ...