如何从XMLHttpRequest获得进展

是否有可能获得XMLHttpRequest的进度(上传的字节数,下载的字节数)？

当用户上传大文件时,这对于显示进度条很有用.标准API似乎不支持它,但也许在那里的任何浏览器中都有一些非标准扩展？毕竟,这似乎是一个非常明显的功能,因为客户端知道上载/下载了多少字节.

注意:我知道"轮询服务器进度"替代方案(这就是我现在正在做的事情).这个问题的主要问题(除了复杂的服务器端代码)通常是,在上传大文件时,用户的连接是完全没有的,因为大多数ISP提供了较差的上游.因此,提出额外请求并不像我希望的那样响应.我希望有一种方法(可能是非标准的)来获取这些信息,浏览器始终拥有这些信息.

1> albanx..：

---

对于上传的字节,这很容易.只是监控xhr.upload.onprogress事件.浏览器知道它必须上传的文件的大小和上传数据的大小,因此它可以提供进度信息.

对于下载的字节(获取信息时xhr.responseText),它有点困难,因为浏览器不知道将在服务器请求中发送多少字节.在这种情况下,浏览器唯一知道的是它接收的字节大小.

有一个解决方案,只需Content-Length在服务器脚本上设置一个标头,以获得浏览器将接收的字节总大小.

有关更多信息,请访问https://developer.mozilla.org/en/Using_XMLHttpRequest.

示例:我的服务器脚本读取zip文件(需要5秒):

$filesize=filesize('test.zip');

header("Content-Length: " . $filesize); // set header length
// if the headers is not set then the evt.loaded will be 0
readfile('test.zip');
exit 0;

现在我可以监视服务器脚本的下载过程,因为我知道它的总长度:

function updateProgress(evt) 
{
   if (evt.lengthComputable) 
   {  // evt.loaded the bytes the browser received
      // evt.total the total bytes set by the header
      // jQuery UI progress bar to show the progress on screen
     var percentComplete = (evt.loaded / evt.total) * 100;  
     $('#progressbar').progressbar( "option", "value", percentComplete );
   } 
}   
function sendreq(evt) 
{  
    var req = new XMLHttpRequest(); 
    $('#progressbar').progressbar();    
    req.onprogress = updateProgress;
    req.open('GET', 'test.php', true);  
    req.onreadystatechange = function (aEvt) {  
        if (req.readyState == 4) 
        {  
             //run any callback here
        }  
    };  
    req.send(); 
}

---

值得注意的是,"内容长度"不是一个估计的长度,它必须是确切的长度,太短,浏览器将切断下载,太长时间,浏览器将认为下载未能完成.

---

@TheProHands当您访问.php页面时,服务器运行PHP文件并向您发送_output_.服务器应该发送输出的长度,而不是.php文件.

2> Markus Peröb..：

---

Firefox支持XHR下载进度事件.

3> Sean McMains..：

---

这里有一个关于AJAX模式进度指标的很好的讨论:

http://ajaxpatterns.org/Progress_Indicator

最有希望的方法之一似乎是打开第二个通信通道回服务器,询问它已经完成了多少传输.

---

我认为这个链接可能已经死了

4> Maciej Łebko..：

---

Firefox 3.5将支持上传进度事件

5> Orclev..：

---

对于上传的总数,似乎没有办法处理它,但有类似于你想要下载的东西.一旦readyState为3,您就可以定期查询responseText以获取到目前为止下载的所有内容(这在IE中不起作用),直到所有内容都可用,此时它将转换为readyState 4.在任何给定时间下载的字节数将等于responseText中存储的字符串中的总字节数.

对于上传问题的全有或全无的方法,因为您必须传递一个字符串进行上传(并且可以确定其总字节数),为readyState 0和1发送的总字节数将为0,而readyState的总字节数将为0 2将是您传入的字符串中的总字节数.在readyState 3和4中发送和接收的总字节数将是原始字符串中的字节数加上responseText中的总字节数.