When the upload form submit button is pressed, the upload of the file starts and i execute an ajax request to uploadprogress.php to get the current progress(it returns a number between 0 and 100, 100 means the upload is complete.)

The idea is that getProgress() function would be self-executed over and over again until the result returned from uploadprogress.php is 100, but updating the progress bar width each time to show the progress to the user :D

anyways, this is not working and i have not idea why. The furthest debugging i reached ended in the $.ajax() method which is wroken or sth.

This short video shows what the result should be: http://screenr.com/ByG (http://screenr.com/ByG)


This is the current testing page: http://gotune.to/test/index.php


The script:

//Start progress tracking when the form is submitted
$('#UploadForm').submit(function() {

//Start updating progress after a 2 second delay.
//This is to prevent the getprogress.php assume that upload is complete.
setTimeout(function () {
// We pass the upload identifier to our function
getProgress($('#uid').val());
}, 2000);

});


//Function used to get the current upload progress.
//It should be executed over and over again untill the result returned is 100.
function getProgress(id) {

//Make an ajax request to the server.
$.ajax({

//Pass the data trought GET method.
type: "GET",

dataType: 'json',

//Get the progress from this php file.
url: "getprogress.php",

//Pass our upload identifier as a parameter and current time to prevent caching.
data: "uid="+ id,

//Get the results.
success: function (d) {

//Get the output as an integer.
var progress = parseInt(d, 10);

//If upload progress is not 100, change bar percentage and update again.
if (progress < 100) {

//Update the progress bar percentage.
//But only if we have started.
$('#ProgressBar').css('width', progress + '%');


//If we aren't done, update again.
getProgress(id);

}
}
});

}

});

Any ideas are welcome :D

thanks in advance

hernantz

Ok got this working on firefox and ie.

But its not working on chorme :(

this is how the getProgress() function ended up.


//Function used to get the current upload progress.
//It should be executed over and over again untill the result returned is 100.
function getProgress(id) {

//Make an ajax request to the server.
$.ajax({
//Pass the data trought GET method.
type: "GET",

//Prevent caching.
cache: false,

//Get the progress from this php file.
url: "getprogress.php",

//Pass our upload identifier as a parameter.
data: {uid: id},

//Get the results.
success: function (d) {

//Get the output as an integer.
var progress = parseInt(d, 10);

//If upload progress is not 100, change bar percentage and update again.
if (progress != '100') {

//Update the progress bar percentage.
//But only if we have started.
$('#ProgressBar').css('width', progress + '%');

//If we aren't done, update again.
getProgress(id);
}
},

error: function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest, textStatus, errorThrown);
}
});

}

Turns out it's a bug, in any webkit based browser all ajax is essentially blocked until the file upload is complete. to bypass this you have to dynamically create an iframe and run the ajax requests from within it.

You can find the bug report here: https://bugs.webkit.org/show_bug.cgi?id=23933