一次多个 XMLHttpRequests

Question

我正在构建一个 php 上传器，我有这个 javascript 为每个文件呈现 select 上传。

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

如何动态 select 进度条而不是总是 selected "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 方法的 class：

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

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

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

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/

一次多个 XMLHttpRequests

Multiple XMLHttpRequests At Once

javascript

php

xmlhttprequest