如何从 XMLHttpRequest 获取进度 [英] How to get progress from XMLHttpRequest

问题描述

是否可以获取 XMLHttpRequest 的进度(上传的字节数、下载的字节数)?

Is it possible to get the progress of an XMLHttpRequest (bytes uploaded, bytes downloaded)?

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

This would be useful to show a progress bar when the user is uploading a large file. The standard API doesn't seem to support it, but maybe there's some non-standard extension in any of the browsers out there? It seems like a pretty obvious feature to have after all, since the client knows how many bytes were uploaded/downloaded.

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

note: I'm aware of the "poll the server for progress" alternative (it's what I'm doing right now). the main problem with this (other than the complicated server-side code) is that typically, while uploading a big file, the user's connection is completely hosed, because most ISPs offer poor upstream. So making extra requests is not as responsive as I'd hoped. I was hoping there'd be a way (maybe non-standard) to get this information, which the browser has at all times.

推荐答案

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

For the bytes uploaded it is quite easy. Just monitor the xhr.upload.onprogress event. The browser knows the size of the files it has to upload and the size of the uploaded data, so it can provide the progress info.

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

For the bytes downloaded (when getting the info with xhr.responseText), it is a little bit more difficult, because the browser doesn't know how many bytes will be sent in the server request. The only thing that the browser knows in this case is the size of the bytes it is receiving.

对此有一个解决方案，在服务器脚本上设置一个 Content-Length 标头就足够了，以获得浏览器将要接收的总字节大小.

There is a solution for this, it's sufficient to set a Content-Length header on the server script, in order to get the total size of the bytes the browser is going to receive.

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

For more go to https://developer.mozilla.org/en/Using_XMLHttpRequest .

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

Example: My server script reads a zip file (it takes 5 seconds):

$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;

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

Now I can monitor the download process of the server script, because I know it's total length:

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(); 
}

这篇关于如何从 XMLHttpRequest 获取进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！