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

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上传进度监测事件