HTML onprogress 属性

在 HTML 中，通过 onprogress 属性可以为某些元素或 AJAX 请求添加一个事件监听器，以便监测进度。

基础语法

<element onprogress="myFunction()">

or

xmlhttp.onprogress = function() {myFunction()};

其中，myFunction() 是要执行的函数名，也可以使用匿名函数。

事件对象

在 onprogress 事件中，可以使用 event 对象来获取关于进展的信息。如下所示：

function myFunction(event) {
  console.log('已下载：' + event.loaded + ' 字节，总大小：' + event.total + ' 字节');
}

可以使用 event.loaded 获取已下载的字节数，使用 event.total 获取总大小（如果已知）。

实例

以下示例演示了如何在 AJAX 请求中使用 onprogress 属性：

var xhttp = new XMLHttpRequest();
xhttp.onprogress = function(event) {
  var percent = Math.round((event.loaded / event.total) * 100);
  console.log('已加载：' + percent + '%');
};
xhttp.open("GET", "yourfile.txt", true);
xhttp.send();

注意事项

由于浏览器对于 onprogress 事件的支持情况不同，因此建议在使用时进行测试。另外，请注意，当请求失败时，可能不会触发 onprogress 事件。