是否有可能获取XMLHttpRequest的进度（已上传字节数，已下载字节数）？
当用户上传大文件时，这将非常有用，可以显示一个进度条。标准API似乎不支持它，但是也许有一些浏览器中的非标准扩展？毕竟，客户端知道上传/下载了多少字节，这似乎是一个非常明显的功能。
注：我知道“轮询服务器以获取进度”的替代方案（这就是我现在正在做的）。除了服务器端代码比较复杂之外，主要问题在于通常在上传大文件时，用户的连接完全崩溃，因为大多数ISP提供的上行速度很差。因此，进行额外的请求并不像我希望的那样响应迅速。我希望有一种方法（可能是非标准的），可以随时获取浏览器拥有的此信息。
xhr.upload.onprogress 事件即可。浏览器知道要上传的文件大小和已上传数据的大小，因此可以提供进度信息。xhr.responseText 获取信息时），有点更加困难，因为浏览器不知道服务器请求中将发送多少字节。在这种情况下，浏览器所知道的唯一事情是它正在接收的字节数。Content-Length 标头，以获取浏览器将要接收的字节的总大小。$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();
}
Firefox支持XHR下载进度事件。
编辑2021-07-08 10:30 PDT
上面的链接已经失效。在Mozilla WebDev网站上搜索后找到了以下链接：
https://developer.mozilla.org/zh-CN/docs/Web/API/ProgressEvent
它介绍了如何使用XMLHttpRequest的进度事件，并提供了一个示例。我在下面包含了这个示例：
var progressBar = document.getElementById("p"),
client = new XMLHttpRequest()
client.open("GET", "magical-unicorns")
client.onprogress = function(pe) {
if(pe.lengthComputable) {
progressBar.max = pe.total
progressBar.value = pe.loaded
}
}
client.onloadend = function(pe) {
progressBar.value = pe.loaded
}
client.send()
我也找到了这个链接，我认为这就是原始链接所指向的内容。
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event
最有前途的方法之一似乎是打开第二个通信渠道，向服务器询问传输已完成的百分比。
<!DOCTYPE html>
<html>
<body>
<p id="demo">result</p>
<button type="button" onclick="get_post_ajax();">Change Content</button>
<script type="text/javascript">
function update_progress(e)
{
if (e.lengthComputable)
{
var percentage = Math.round((e.loaded/e.total)*100);
console.log("percent " + percentage + '%' );
}
else
{
console.log("Unable to compute progress information since the total size is unknown");
}
}
function transfer_complete(e){console.log("The transfer is complete.");}
function transfer_failed(e){console.log("An error occurred while transferring the file.");}
function transfer_canceled(e){console.log("The transfer has been canceled by the user.");}
function get_post_ajax()
{
var xhttp;
if (window.XMLHttpRequest){xhttp = new XMLHttpRequest();}//code for modern browsers}
else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5
xhttp.onprogress = update_progress;
xhttp.addEventListener("load", transfer_complete, false);
xhttp.addEventListener("error", transfer_failed, false);
xhttp.addEventListener("abort", transfer_canceled, false);
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "http://it-tu.com/ajax_test.php", true);
xhttp.send();
}
</script>
</body>
</html>
如果您可以访问您的Apache安装并信任第三方代码，您可以使用apache上传进度模块（如果您使用Apache；还有nginx上传进度模块）。
否则，您需要编写一个脚本，以便您可以在带外请求文件状态（例如检查tmp文件的文件大小）。
我相信Firefox 3正在进行一些工作，以添加浏览器上传进度支持，但这不会进入所有浏览器并被广泛采用一段时间（更多的是遗憾）。
只有使用纯 JavaScript 实现某种轮询机制才能够实现。您需要定期发送 Ajax 请求（例如每 5 秒）以获取服务器接收到的字节数。
更有效的方法是使用 Flash。flex 组件 FileReference 定期分派“progress”事件，其中包含已上传的字节数。如果您必须使用 JavaScript，则可在 ActionScript 和 JavaScript 之间使用桥连接。好消息是，这项工作已经为您完成了 :)
此库允许在 flash 进度事件上注册 JavaScript 处理程序。
这个解决方案的巨大优势在于不需要在服务器端添加额外的资源。