Question

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

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

XMLHttpRequest和进度条？

1 个答案: