Javascript 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不再跟踪发送到服务器的数量，而是跟踪文件加载到内存中发送到服务器的数量。因此，它几乎立即达到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相同，然后几秒钟后，根据文件的大小，上载实际上完成并处理响应。你知道我如何解决这个问题以显示上传进度吗？

我在FormData上遇到了一个相关问题，我通过移动meta来获取并发送（）文件来解决。你有一些代码可以分享吗？我还发现第二种方法不能正确地检测错误头，所以我必须使用第一种方法第二种方法的onload意味着200状态，否则它不会加载。您可以使用另一个catch-all事件onloadend在一个处理程序中获得成功和错误。代码调整将把meta移动到url中，获取样式，去掉FormData循环，然后使用xhr.send（$（'#file upload'）[0].files[0]）；发送单个文件的二进制内容。如果您有多个文件，您可以执行多个ajax；最好不要丢弃整个批，因为一个文件无论如何都失败了。。。不管怎么说，你也许可以修复你的进度，这只是我曾经做过的一件事……嘿，你有没有设法解决这个问题？不幸的是，我不记得了。我没有回来发布答案，所以我认为我没有，于是放弃了。