Javascript XMLHttpRequest和进度条？

我使用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);

，我猜你没有正确地做其他事情。请注意，我改为

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;
});

---

尝试将侦听器移动到var xhr=new XMLHttpRequest（）之后；还要确保您的文件足够大。我认为最好使用

xhr.upload.addEventListener（“progress”，…）

我的意思是，对于基本的调试，您应该记录

complete

值，以确保它甚至在爬升，而不仅仅是达到100。注意，这个协议不适用于我遇到同样问题的文件，我使用了css转换。：）