Javascript XHR上传进度从一开始就是100%

我正在尝试新的XMLHTTPRequestUpload功能，将一些文件上传到php脚本，它基本上工作正常，上传开始，我得到了完成响应，等等，但进展似乎不起作用

查看event.loaded值——在firefox中，我似乎得到了一个介于0和文件大小之间的随机值；在Chrome（我主要工作的地方）中，我得到了文件的总大小，即使readystate还没有达到'4'，开发者工具窗口仍然显示要加载的文件

有什么想法吗

这是我的密码：

var xhr = new XMLHttpRequest()

xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
        $('ajaxFeedbackDiv').innerHTML = event.loaded + ' / ' + event.total;
    }
}, false);

xhr.onreadystatechange = function(event) {
    if (event.target.readyState == 4) {
        updateFileList();
    }
};

xhr.open("POST", "_code/upload.php");
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("X-File-Size", file.size);
xhr.setRequestHeader("X-File-Type", file.type);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr(file);

非常感谢

---

Ben

我最近还遇到了一些困难，无法为XHR onprogress事件设置事件侦听器。我最终将其实现为一个匿名函数，它工作得非常出色：

xhr.upload.onprogress = function(evt)
{
    if (evt.lengthComputable)
    {
        var percentComplete = parseInt((evt.loaded / evt.total) * 100);
        console.log("Upload: " + percentComplete + "% complete")
    }
};

---

然而，我在途中偶然发现了许多其他的陷阱，所以很可能其中一个是我的事件侦听器被绊倒了。这里的内容与我的设置之间唯一的其他区别是，我使用的是xhr.sendAsBinary（）。

我自己也遇到了类似的问题，在

XMLHttpRequest

上的

progress

事件的事件处理程序函数只执行了一次——当上载完成时

问题的原因很简单——在Google Chrome（可能还有其他浏览器，我没有测试过）中，

progress

事件只有在上传运行一两秒钟后才会连续触发。换句话说，如果你的上传很快完成，那么你很可能只会得到一个100%的进度事件

下面是一个代码示例，其

progress

事件仅在100%完成时触发一次（）：

控制台输出：

Upload  100% complete.

但是如果在阵列的大小上添加一个额外的零（将有效负载大小增加10--）：

然后您将获得

进度

事件的正常进度：

Upload  8% complete.
Upload  9% complete.
Upload  19% complete.
Upload  39% complete.
Upload  50% complete.
Upload  81% complete.
Upload  85% complete.
Upload  89% complete.
Upload  100% complete.

这种行为取决于您的互联网连接速度，因此您的里程数会有所不同。例如，如果您以第一个示例为例，使用Chrome Developer工具降低与模拟“慢速3G”的连接速度，那么您将看到一系列的

进度

事件

---

类似地，如果您在本地开发并将数据上载到本地web服务器，您可能永远不会看到

进度

事件，因为上载将立即完成。这可能是@brettjonesdev在本地主机与远程prod部署中看到的情况。

我有类似的问题，我找到了原因。在我的情况下，麻烦制造者在我的电脑上是防病毒的（bitdefender）。当我关闭bitdefender保护时，进度会完全正常。

您是否找到了解决问题的方法或解决方法？我目前也遇到同样的情况，但这似乎取决于您的网络连接。它在一个位置按预期工作，从另一个位置跳到100%。我也遇到了同样的问题。有趣的是，这似乎只发生在我在本地主机上运行时——当我部署到我们的开发或产品服务器上时，加载的值会像预期的那样返回。XHR上载进度仅在本地主机上（我不知道为什么），如果您尝试向远程web服务器或远程服务器发出请求，你会看到明显的进展。我在发送FormData和限制Chrome的上传速度时仍然存在这个问题。上载将花费最多一分钟的时间，并且只在最后发出一个事件。有什么想法吗？

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        console.log("Upload ", Math.round(percentComplete*100) + "% complete.");
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/echo/json/",
  data: {json: JSON.stringify(new Array(200000))}
});

Upload  8% complete.
Upload  9% complete.
Upload  19% complete.
Upload  39% complete.
Upload  50% complete.
Upload  81% complete.
Upload  85% complete.
Upload  89% complete.
Upload  100% complete.