CODEWITHSUNDEEP
javascriptphpxmlhttprequest
user3916570
user3916570

Reputation: 778

Multiple XMLHttpRequests At Once

I am building a php uploader and I have this javascript that is rendered for each file selected for upload.

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

I want to be able to update a different progressbar for each request; however, but I cannot figure out how to do this.

This is my progresshandler function

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

How do I dynamically select the progress bar instead of always selected "upProgress" bar?

NEW CODE:

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

And then for each file the following is done.

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

The problem now is that only the last file to be uploaded has its progressbar updated; however both files do get uploaded. I can see that the progressHandler is being called the all however as I had it print in the console, so does only the first update visually?:

Console

Visual

Upvotes: 2

Views: 985

Answers (1)

Seamus
Seamus

Reputation: 4819

You could create a class that references a DOM element, and has a progressHandler method:

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

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

Then create an instance of this class for each progress bar:

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

Then pass the method as the handler for each as the ajax event listener:

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

Working example here: https://jsfiddle.net/rrun9ftz/

Upvotes: 1

Related Questions