PHP AJAX progress bar update with multiple steps

Question

I already know how to do a simple AJAX Progress Bar type of system for uploading a single file using the following setup...

function pushData() {
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "dosomething.php");

ajax.send(formdata);
}

function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
}

function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

However, I want to be able to do a progress bar based off of steps being done on the dosomething.php bage sent back to the handler.

For example...

Lets say I had the following code structure...

   //report back doing step1
   //do step 1....

   //report back doing step2
   //do step 2....

   etc...

I already know my max amount of steps will be "5". I want to be able to make it so the progress bar goes up after reporting back each step up to the max of "5" steps. Which means when I'm on step 1, of course the progress bar will show 20% completed, step 2 at 40% etc..

How would I go about doing something like this? Help is much appreciated.

EDIT - More detailed information on what is being done..

As stated by Benten I could possibly seperate it into 5 different pages, but that seems like it would cause more issues than solving this one since a lot of data would then have to be passed to each new page instead of just using 1 page. For example.. Step 1, I have to convert data into something different. Step 2, I have to do a lookup on the data. Step 3, I have to take all the data I found when looking up the data, then organize it and insert the information into a database. etc... These steps usually take around 5 - 10 seconds each, which is why I wanted to progress bar the responses.

I don't think @Benton suggested you split the process into 5 steps on the users end (which is what I understand when you say 5 different pages) - just that you split the actual work into 5 separate ajax-requests (after each of which you could increment the progress bar)... If that is not an option you are probably looking at much more complicated solutions. — Mikk3lRo
– Mikk3lRo, Commented Jul 6, 2015 at 18:33
of course browser support would need it to work on all browsers at least IE9 and above. How would I go about doing it in 5 different ajax requests? that's the part that is confusing me. This might be a possiblity, but i'm not seeing it in my mind unfortunately. — eqiz
– eqiz, Commented Jul 6, 2015 at 18:40
If you can imagine doing it in 5 different pages, then doing it in 5 different ajax-requests would be exactly the same - except those "pages" aren't displayed to the user, but returned to a javascript function that updates the progress meter... You know how to make one ajax-request, right? If using jQuery something like $.get('step1.php', function(data){$('#prog').css({width:data + '%'}); $.get('step2.php', function(data){$('#prog').css({width:data + '%'})}); }); and from step1.php just do the work and then echo "20"; ...edit: sorry that is not very readable, I'll post an answer instead. — Mikk3lRo
– Mikk3lRo, Commented Jul 6, 2015 at 18:45

Benten · Accepted Answer · 2015-07-06 14:09:57Z

4

Could you split your steps into 5 seperate requests? Or perhaps, everythime you complete a step in your php code could create a row in a database or something simliar. A seperate ajax request could then check or wait for this row addition and report back the progress to the user.

answered Jul 6, 2015 at 14:09

Benten

1,03913 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mikk3lRo · Accepted Answer · 2015-07-06 19:01:04Z

To do seperate requests you could write something like this (assuming you have jQuery loaded into $):

$.get('step1.php', function(data){
    $('#prog').css({width:data + '%'});
    $.get('step2.php', function(data){
        $('#prog').css({width:data + '%'});
        //[...and so on]
    });
});

Then in step1.php [...] step5.php:

<?php
//Do some really heavy lifting:
sleep(5);

//Return the progress
echo "20";

To put it into your original context this might help you better imagine it (still assuming $=jQuery):

function completeHandler(event){
    //Upload completed
    _("status").innerHTML = 'File upload completed - doing step 1';
    _("progressBar").value = 0;
    $.get('step1.php', function(data){
        _("status").innerHTML = 'Step 1 completed - doing step 2';
        _("progressBar").value = data;
        $.get('step1.php', function(data){
            _("status").innerHTML = 'Step 2 completed - doing step 3';
            _("progressBar").value = data;
            //[...and so on]
        });
    });
}

Collectives™ on Stack Overflow

PHP AJAX progress bar update with multiple steps

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related