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.

Answer 1

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.

Answer 2

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