如何从XMLHttpRequest获得进度

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

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

注意:我知道“轮询服务器以获取进度”选项(这就是我现在正在做的)。这方面的主要问题(除了复杂的服务器端代码)是,通常在上传大文件时,用户的连接被完全阻塞,因为大多数ISP提供的上游服务都很差。因此,提出额外的要求并不像我希望的那样反应迅速。我希望有一种方法(可能是非标准的)来获取这些信息,而浏览器一直都有这些信息

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

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

有一个解决方案可以解决这个问题,在服务器脚本上设置Content Length头就足够了,以便获得浏览器将要接收的字节的总大小

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

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

$filesize=filesize('test.zip');
标题(“内容长度:”.$filesize);//设置标题长度
//如果未设置标题,则evt.loaded将为0
readfile('test.zip');
出口0;

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

函数更新进程(evt)
{
if(evt.长度可计算)
{//evt.已加载浏览器接收到的字节
//evt.total标头设置的总字节数
//jQuery UI进度条,用于在屏幕上显示进度
var percentComplete=(evt.loaded/evt.total)*100;
$(“#progressbar”).progressbar(“选项”,“值”,完成百分比);
}
}
函数sendreq(evt)
{
var req=新的XMLHttpRequest();
$(’#progressbar’).progressbar();
req.onprogress=updateProgress;
req.open(’GET’,’test.php’,true);
req.onreadystatechange=函数(aEvt){
如果(req.readyState==4)
{
//在这里运行任何回调
}
};
请求发送();
}

发表评论