一次多个 XMLHttpRequest

Question

我正在构建一个 php 上传器，并且我为每个选择上传的文件呈现了这个 javascript。

        var formdata = new FormData();
        formdata.append("file1", file);

        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.open("POST", "fileUploader.php");

        startTime = (new Date()).getTime();
        ajax.send(formdata);

我希望能够为每个请求更新不同的进度条；但是，但我无法弄清楚如何做到这一点。

这是我的进度处理函数

function progressHandler(event) {
document.getElementById("upProgress").value = event.loaded/event.total * 100;
}

如何动态选择进度条而不是总是选择“upProgress”条？

新代码：

var pgb = function(div, progBar) {
            this.div = div;
            this.progBar = progBar;

            var _this = this;

            this.progressHandler = function(event) {
                _this.progBar.value = event.loaded/event.total * 100;
            }
            this.completeHandler = function(event) {
                _this.div.innerHTML += "...done";

                console.log(_this.progBar);
            }
        }

然后对每个文件执行以下操作。

var l_pbg = new pgb(document.getElementById('div_'+index), document.getElementById('up_'+index));

            var ajax = new XMLHttpRequest();
            ajax.upload.addEventListener("progress", l_pbg.progressHandler, false);
            ajax.addEventListener("load", l_pbg.completeHandler, false);
            ajax.addEventListener("error", errorHandler, false);
            ajax.addEventListener("abort", abortHandler, false);
            ajax.open("POST", "fileUploader.php");

            startTime = (new Date()).getTime();
            ajax.send(formdata);

现在的问题是只有最后一个要上传的文件的进度条才会更新；但是这两个文件都被上传了。我可以看到 progressHandler 被称为 all 但是因为我在控制台中打印它，所以只有第一次视觉更新吗？：

Answer 1

你可以创建一个引用 DOM 元素的类，并有一个 progressHandler 方法：

var Pgb =  function(elem) {
    this.elem = elem;

    var _this = this;
    this.progressHandler = function(event) {
        _this.elem.value = event.loaded/event.total * 100;
    }
}

然后为每个进度条创建这个类的实例：

var pgb1 = new Pgb(document.getElementById("upProgress1"));
var pgb2 = new Pgb(document.getElementById("upProgress2"));

然后将方法作为处理程序传递给每个作为 ajax 事件侦听器：

ajax.upload.addEventListener("progress", pgb1.progressHandler, false);
ajax.upload.addEventListener("progress", pgb2.progressHandler, false);

这里的工作示例：https://jsfiddle.net/rrun9ftz/