Javascript AJAX 上传与 Firefox 不兼容

Question

我为我的网站使用 AJAX 上传，选择 Javascript（不是 jQuery）。 但是我想出的东西不适用于 Firefox。这是 XMLHttpRequest 代码块：

    var xhr = new XMLHttpRequest();

    xhr.open("POST", "upload.php");

    xhr.onprogress = function(event){
        if(event.lengthComputable)
        {
            console.log(event.loaded);
        }
    };

    xhr.setRequestHeader("Cache-Control", "no-cache");

    xhr.send(formData);

并关注xhr.onprogress事件。

另外，我也使用以下代码来进行进度：

xhr.upload.addEventListener("progress", function(){
// do something
}, false);

但是：

对于第一个解决方案 xhr.onprogress 它有问题：

它只显示上传完成后event.loaded 的数量。此数量与文件大小相同，因为上传已完全加载文件。 它适用于 FF 和 chrome，但我不希望它在进度结束后只抛出一个值。

不过，第二个解决方案很好，并且工作正常，但它在 Firefox 中根本不起作用。然而，在 Firefox 中，不会引发任何错误，而且正如我所测试的，progressEvent 根本不会被触发。

chrome 和 Firefox 都是最新版本。

Answer 1

我认为问题是您在open() 之后添加onprogress 侦听器，应该在之前完成：

var xhr = new XMLHttpRequest();
xhr.onprogress = function (event) {
    if (event.lengthComputable) {
        console.log(event.loaded);
    }
};

xhr.open("POST", "upload.php");

或者：

var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", function (event) {
    if (event.lengthComputable) {
        console.log(event.loaded);
    }
}, false);

xhr.open("POST", "upload.php");