XMLHttpRequest event.loaded行为改变了吗?

时间:2015-02-03 21:25:09

标签: javascript file-upload xmlhttprequest

前段时间,我写了一个看起来像这样的脚本:

$("#file-upload-button").click(function(e) {
    e.preventDefault();

    var data = new FormData();
    jQuery.each($('#file-upload')[0].files, function(i, file) {
        data.append('file', file);
    });

    $.ajax({
        type: "POST",
        url: self.urlroot + '/file/upload',
        data: data,
        contentType: false,
        processData: false,
        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(percentComplete);
                    //more stuff
                }
            }, false);
            //Download progress
            xhr.addEventListener("progress", function(evt){
                //something similar to above
            }, false);
            return xhr;
        },
        success: function( response ) {
            //stuff
        },
        error: function() {
            //stuff
        }
    });
});

它运作得很好。今天我尝试在另一个页面上重用代码,并且我已经确定evt.loaded不再跟踪已经发送到服务器的数量,而是跟踪已经将多少文件加载到内存中< em>将发送到服务器。因此,它几乎立即达到100%,因为文件非常快速地加载到内存,而没有准确指示已经发送到服务器的数量。我尝试将代码更新为以下内容,但无济于事:

$("#file-upload-button").change(function(e) {
    e.preventDefault();

    $("button").attr("disabled", true).fadeTo("fast", 0.5);

    var data = new FormData();
    jQuery.each($('#file-upload')[0].files, function(i, file) {
        data.append('file', file);
    });

    var xhr = new XMLHttpRequest;
    xhr.upload.onprogress = function (evt) {
        var percentComplete = evt.loaded / evt.total;
        console.log(percentComplete, evt.loaded, evt.total);
        //some stuff
    };
    xhr.upload.onload = function (e) {
        //some stuff
    };
    xhr.upload.onerror = function (e) {
        //some stuff
    };

    xhr.open("POST", "Owl/");
    xhr.send(data);
});

在这两个实例中,它几乎立即显示evt.loaded与evt.total相同,然后几秒钟后根据文件的大小,上传实际完成并处理响应。知道如何解决这个问题,以实际显示上传的进度吗?

0 个答案:

没有答案