XMLHttpRequest 和进度条？答案

【问题标题】：XMLHttpRequest and a progress bar?XMLHttpRequest 和进度条？
【发布时间】：2014-03-14 00:42:53
【问题描述】：

我使用 formData 和一个 XMLHttpRequest 发送一系列图像和数据，它将数据上传到数据库并将图像上传到 S3。

我遇到的问题是进度条立即跳到 100%。

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/gateway/add');
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.onload = function () {
        };
        xhr.upload.onprogress = function (event){

            if(event.lengthComputable){
                var complete = (event.loaded / event.total * 100 | 0);
                $('.meter').css('width', complete+'%');
            }
        };

        xhr.send(formData);

【问题讨论】：

试着在 var xhr = new XMLHttpRequest(); 之后移动你的听众还要确保你的文件足够大。
我觉得还是用xhr.upload.addEventListener("progress", ...)比较好
我的意思是，对于基本调试，您应该记录 complete 值，以确保它甚至可以攀升，而不仅仅是达到 100。
请注意此协议不适用于文件developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…
我遇到了同样的问题，我使用了 css 过渡。 :)

标签： javascript jquery

【解决方案1】：

It works for me，我猜你没有正确地做其他事情。请注意，我已更改为 addEventListener，因为我认为这是更好的做法，但除此之外，它基本上是您的代码：

$("#in").on("change", function (e) {
    var file = this.files[0],
        formData = new FormData(),
        xhr = new XMLHttpRequest();

    formData.append('files', file);

    xhr.open('POST', '');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.upload.addEventListener("load", function () {
        $(".meter").addClass("done");
    });
    xhr.upload.addEventListener("progress", function (event) {
        if (event.lengthComputable) {
            var complete = (event.loaded / event.total * 100 | 0);
            $('.meter').css('width', complete + '%');
        }
    });

    xhr.send(formData);
    return false;
});

【讨论】：