如何从XMLHtt prequest获得进展 [英] How to get progress from XMLHttpRequest

问题描述

时有可能得到的XMLHtt prequest的进展（上传字节，字节下载）？

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

这将是有益的，以显示当用户上传大文件的进度条。标准的API似乎并不支持它，但也许有一些不规范的扩展在任何浏览器了吗？这似乎是一个pretty的明显特征是具有毕竟，因为客户知道了多少字节上传/下载的。

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.

请注意：我知道的服务器轮询进步替代（这是我在做什么现在）。与此的主要问题（比复杂服务器端code等）是典型地，在上载一个大文件，用户的连接被完全大清洗，因为大多数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 is quite easy. Just monitor the xhr.upload.onprogress event, browser know the size of the files has to upload and the size of uploaded data so it can give the progress info.

有关下载字节（当获得与 xhr.responseText 信息），这是一个有点困难，因为浏览器不知道有多少字节将发送服务器请求。该浏览器知道在这种情况下，唯一的是它的接收字节的大小。但是对于这样的解决方案，这是足以使一个内容长度上的服务器脚本头，以便得到浏览器正在接收的字节大小。更多信息请访问<一个href="https://developer.mozilla.org/en/Using_XMLHtt$p$pquest">https://developer.mozilla.org/en/Using_XMLHtt$p$pquest

For the bytes downloaded (when get info with the xhr.responseText), it's a little more difficult, because the browser doesn't know how many bytes will send the server request. The only thing that browser knows in this case is the size of bytes it's receiving. But there is a solution for this, it's sufficient to set a Content-Length header on the server script so to give the size of bytes the browser is receiving. for more info 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 it not set then the evt.loaded will be 0
readfile('test.zip');
echo "asdasd";

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

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 browser receive
      //evt.total the total bytes seted by the header
      //
     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(); 
}

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