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，也就是无穷大。
- xhr.upload.addEventListener(
- 'progress',
- function(e){
- // do something here ...
- //e.isTrusted
- //e.lengthComputable
- //e.loaded
- //e.total
- }
- );
- xhr.send(formData);
xhr.onprogress是AJAX下载进度监测事件
xhr.upload.onprogress是AJAX上传进度监测事件 |
|
