找回密码
 注册

XMLHttpRequest xhr.upload.onprogress AJAX progress事件失效解决方法

php 发表于 2017/12/14 20:33 | 显示全部楼层 |阅读模式
xhr.upload.onprogress失效是很多人都踩过的坑,对于XMLHttpRequest Level 2,假设xhr是XMLHttpRequest的实例对象,那么xhr.upload.addEventListener('progress', callback)或者xhr.upload.onprogress = callback; 可以用来监测文件上传进度,xhr.upload是一个XMLHttpRequestUpload对象,即xhr上传对象,xhr.upload有abort, error, load, load, loadend, loadstart, progress, timeout几个事件。
如果绑定的事件没有被触发,很有可能是事件绑定的代码写错了位置。正确的位置是在xhr.send()以前,将xhr.upload.onprogress = callback; 或者xhr.upload.addEventListener('progress', callback); 放到xhr.send()后面是不会生效的,其他的事件也一样。
对于xhr.upload.onprogress事件处理函数,它的第一个参数e为上传进度发生变化时触发的事件,e.isTrusted和e.lengthComputable为布尔值,e.isTrusted为true时代表事件为用户触发的可信事件,e.lengthComputable为true时代表上传总字节量可以计算出来,e.loaded是已经加载的字节数,e.total是总的字节数, e.loaded / e.total 就是完成的比例, 需要注意的是,如果e.lengthComputable为false,e.total为0. 所以在计算进度的时候需要先判断e.lengthComputable,否则得到的值是Infinity,也就是无穷大。
  1. xhr.upload.addEventListener(
  2.         'progress',
  3.         function(e){
  4.                 // do something here ...
  5.                 //e.isTrusted
  6.                 //e.lengthComputable
  7.                 //e.loaded
  8.                 //e.total
  9.         }
  10. );                                                
  11. xhr.send(formData);
复制代码
如果xhr用于下载,XMLHttpRequest本身的progress事件可以用来监测下载进度。
xhr.onprogress是AJAX下载进度监测事件
xhr.upload.onprogress是AJAX上传进度监测事件

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表