HTTP进度事件

进度事件

XMLHttpRequest对象在请求的不同阶段出发不同类型的事件。

进度事件虽如此普遍事实上它们是在另外的规范中提出的。 这些事件是专门为展示数据的传输过程而设计的。比如使用FileReader 从服务器或者硬盘中读数据的过程。

六个进度事件如下：

loadstart – 表明进度开始。这是第一个触发的事件。

progress – 数据加载过程中不停觖发.

error – 数据加载失败触发.

abort –当调用 abort()来取消数据加载时触发 (XMLHttpRequest和FileReader通用).

load – 全部数据成功加载完毕触发。

loadend – 加载结束时触发，无论是error, abort, 或者 load都触发。

进度追踪

用progress 事件可以追踪进度。此事件携带三个数据传输过程的属性值：

lengthComputable – 布尔值，表明当前浏览器能否传输完整的数据。

loaded – 已经读取的字节数。

total – 要读取的字节总数。

这些值可以用于进度条显示的进度信息。例如，要以用一个HTML5的<progress> 元素即时显示读取一个文件的进度值。配合进度值你可以这么使用：

var xhr= new XMLHttpRequest (),
 
xhr.onprogress = function(event) {
   var divStatus = document.getElementById("status");
    if (event.lengthComputable) {
      divStatus.innerHTML = "Recived" + event.position + " of " + event.totalSize + " bytes";
    }
};
 
xhr.onloadend = function(event) {
    var contents = event.target.result,
        error    = event.target.error;
 
    if (error != null) {
        console.error("File could not be read! Code " + error.code);
    } else {
     //...
    }
};

这有点像Gmail的拖拽文件上传功能，即当你将一个文件拖到邮件里后的效果，显示了文件已经传输了多少服务器。