如何从XMLHttpRequest获取进度

6 浏览
0 Comments

如何从XMLHttpRequest获取进度

是否有可能获取XMLHttpRequest的进度（已上传的字节数，已下载的字节数）？\n当用户上传大文件时，这将有助于显示进度条。标准API似乎不支持这个功能，但也许在任何浏览器中都有一些非标准扩展？毕竟，客户端知道已上传/下载的字节数，这似乎是一个非常明显的功能。\n注意：我知道“轮询服务器以获取进度”是一种替代方案（这是我目前正在做的）。除了复杂的服务器端代码之外，这种方法的主要问题是，通常在上传大文件时，用户的连接会完全崩溃，因为大多数ISP提供的上行速度较慢。因此，发出额外的请求并不像我希望的那样响应迅速。我希望有一种（可能是非标准的）方法来获取浏览器始终具备的这些信息。

0

3 答案

0 Comments

XMLHttpRequest是一种用于在浏览器和服务器之间进行数据传输的技术。然而，当我们使用XMLHttpRequest进行大文件传输时，我们经常需要知道传输的进度。这就引发了一个问题：如何从XMLHttpRequest获取传输的进度？
其中一个最有希望的方法似乎是打开第二个通信通道，向服务器询问已经完成的传输量。
以下是解决该问题的代码示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/bigfile.zip', true);
xhr.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total;
console.log(percentComplete);
}
});
xhr.send();

[/apcode]

通过上述代码，我们可以通过在XMLHttpRequest对象上添加一个'progress'事件监听器来获取传输的进度。在事件处理程序中，我们可以使用event.loaded属性表示已经传输的字节数，并使用event.total属性表示总字节数。通过这两个属性，我们可以计算出传输的百分比，并将其打印到控制台上。

通过以上方法，我们可以轻松地获取XMLHttpRequest传输的进度，从而更好地管理和控制大文件的传输过程。

0
0 Comments

如何从XMLHttpRequest获取进度

在Firefox浏览器中，支持XHR下载进度事件。以下是如何使用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()

上述代码通过XMLHttpRequest对象实现了进度事件的监听和处理。在onprogress事件处理程序中，通过判断pe.lengthComputable的值来确定是否能计算进度，并将进度值赋给进度条的value属性。在onloadend事件处理程序中，将加载的进度值赋给进度条的value属性。

然而，在一些情况下，使用XMLHttpRequest获取进度可能会出现问题。比如在一个JsFiddle示例中（链接为https://jsfiddle.net/thoakun/7tjnbd8p/），请求JQuery库时，event.lengthComputable的值为undefined，因此无法计算加载进度。

以上是关于如何从XMLHttpRequest获取进度的问题的原因和解决方法。

0
0 Comments

XMLHttpRequest是一种用于在后台与服务器交换数据的技术，它可以通过JavaScript发送HTTP请求并接收来自服务器的数据。然而，当我们使用XMLHttpRequest时，有时我们需要获取请求的进度信息，例如上传的字节数或下载的字节数。

对于上传的字节数，非常简单。只需监视xhr.upload.onprogress事件即可。浏览器知道要上传的文件的大小和已上传数据的大小，因此可以提供进度信息。

对于下载的字节数（通过xhr.responseText获取信息），稍微复杂一些，因为浏览器不知道服务器请求中将发送多少字节。在这种情况下，浏览器只知道正在接收的字节大小。

解决方法是在服务器脚本上设置"Content-Length"头，以获取浏览器将接收的字节的总大小。

下面是一个示例，展示了如何使用XMLHttpRequest来监控服务器脚本的下载进度：

function updateProgress(evt) {
   if (evt.lengthComputable) {
      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) {  
             //运行任何回调函数
        }  
    };  
    req.send(); 
}

需要注意的是，"Content-Length"头必须是精确的长度。如果太短，浏览器将截断下载；如果太长，浏览器将认为下载未完成。

在上述示例中，服务器脚本读取一个zip文件，并设置了"Content-Length"头来指定其总长度。这样，我们就可以监控服务器脚本的下载进度，因为我们知道它的总长度。

希望这个回答对新用户来说易于理解。如果有任何问题，请随时提问。

0