javascript - 来自 xhr 循环中的多个 onprogress 事件处理程序

Question

我目前正在尝试构建一个 ajax 图像 uploader ，除了一个重要部分之外，我让它可以正常工作。

对于我上传的每个单独文件，我想更新该文件的进度条。目前它只更新最后一个文件的进度条。

       $("#upload-btn").click(function() {
            console.log("Click");

            for (var i = 0; i < files.length; i++) {
                var fd = new FormData();
                fd.append("file", files[i]);
                fd.append("__RequestVerificationToken", $("input[name='__RequestVerificationToken']").val());

                var xhr = new XMLHttpRequest();
                xhr.open('POST', "@Url.Action("AjaxUpload")", true);

                var filename = files[i].name;

                xhr.upload.onprogress = function (e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded / e.total) * 100;
                        console.log(percentComplete + '% uploaded');

                        var progressbar = $('a[data-name="' + files[i].name + '"]').siblings(".progress").find(".progress-bar");
                        progressbar.css("width", percentComplete + "%");
                    }
                };

                xhr.onload = function () {
                    console.log(this.status);
                    if (this.status == 200) {
                        var resp = JSON.parse(this.response);
                        console.log('Server got:', resp);
                    };
                };

                xhr.send(fd);
            }
        }); 

正如您可能从代码中猜到的那样，我在 javascript 方面非常糟糕......非常感谢任何帮助。

Answer 1

您需要在进度回调中调整文件名的范围，目前它只会使用i的最后一个值。将您设置 onprogress 处理程序的位置替换为此代码。

(function(filename) {
    xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
           var percentComplete = (e.loaded / e.total) * 100;
           console.log(percentComplete + '% uploaded');

           var progressbar = $('a[data-name="' + filename + '"]').siblings(".progress").find(".progress-bar");
           progressbar.css("width", percentComplete + "%");
        }
    };
})(files[i].name);