On my #secretProject (#wmps) we need a file upload progress meter, and I'd rather not use one of the flash based solutions (that are apparently breaking like heck under Flash 10). There's a couple tutorials out there demonstrating this, Rasmus', as well as a great one at IBM. My issue was both was that they were using Ajax libraries (it's kind of hidden in the IBM one, it ends up relying on some functionality from Google Maps that I don't really understand).

Anyways, go read the IBM one, then substitute in this function and you've got a non-internet explorer ajax upload meter, with no external dependencies. Remember you need APC with the RFC 1387 option enabled.

If you need hints on making this cross browser (I'm presenting a stripped down example on purpose) take a look at the great info in the Mozilla Ajax Series

Code after the jump:

?function getProgress(){

//GDownloadUrl("getprogress.php?progress_key=",
// function(percent, responseCode) {
// document.getElementById("progressinner").style.width = percent+"%";
// if (percent < 100){
// setTimeout("getProgress()", 100);
// }
// });

httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'getprogress.php?progress_key=<?php echo($id)?>');
httpRequest.onreadystatechange = function()
{
if (httpRequest.readyState == 4)
{
var response = httpRequest.responseText;
document.getElementById("progressinner").style.width = response+"%";
document.getElementById("progressinner").innerHTML = response+"%";
console.log(response);
if (response < 100)
{
setTimeout("getProgress()", 5000); //Update bar every 5 seconds. Apropriate for really freaking huge uploads
}

}
}
httpRequest.send(null);


}