IT源码网

怎样监听文件的上传进度讲解

flyfish 2021年03月09日 编程语言 198 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虾米 (左侧二维码扫一扫)欢迎添加!

怎样实现跨域AJAX请求发送Cookie讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。