IT源码网

怎样监听文件的上传进度

flyfish 2021年03月09日 编程语言 456 0

使用: xhr.upload.onprogress事件监听属性. 

function upload(blobOrFile) { 
  var xhr = new XMLHttpRequest(); 
  xhr.open('POST', '/server', true); 
  xhr.onload = function (e) {}; 
 
  var progressBar = document.querySelector('progress'); 
  xhr.upload.onprogress = function (e) { 
    if (e.lengthComputable) { 
      progressBar.value = (e.loaded / e.total) * 100; 
      // 兼容不支持 <progress> 元素的老式浏览器 
      progressBar.textContent = progressBar.value; 
    } 
  }; 
 
  xhr.send(blobOrFile); 
} 
 
upload(new Blob(['hello world'], {type: 'text/plain'}));

 

注意: 除了可以监听上传进度之外, 还可以监听: loadstart、loadend、load、abort、error、timeout.

评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!