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(){

// 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+"%";
if (response < 100)
setTimeout("getProgress()", 5000); //Update bar every 5 seconds. Apropriate for really freaking huge uploads



Comments »

No Trackbacks
Bonus comment for those of you who read comments.

If you're using the file upload progress stuff, you have to include the APC_UPLOAD_PROGRESS form element before the file element. Browsers tend to send data in the order it appears in the form, if it comes afterwords the association will not be present.
#1 Paul Reinheimer (Homepage) on 2009-02-02 02:34 (Reply)

Minor correction, it's actually RFC1867 not RFC1387.

The latest CVS of APC also includes a fix for a bug that would seem to randomly make the entire POST data disappear, so if you happen to experience this you may want to grab the latest CVS code.
#2 shire (Homepage) on 2009-02-03 20:48 (Reply)

Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.

Hi, I’m Paul Reinheimer, a developer working on the web.

I co-founded WonderProxy which provides access to over 200 proxies around the world to enable testing of geoip sensitive applications. We've since expanded to offer more granular tooling through Where's it Up

My hobbies are cycling, photography, travel, and engaging Allison Moore in intelligent discourse. I frequently write about PHP and other related technologies.