Monday, March 13th, 2006
Asynchronous file upload with AJAX progress bar in PHP
Category: Ajax
, PHP, Programming
Thomas Larsson has posted a short tutorial on his blog with something that I’ve heard many a PHP (and just web) developer looking for - a good way to provide multiple file uploads without sacrificing the functionality of the page. Thomas has created a combination of PHP, Ajax, and a backend script to create a method for asynchronous file uploads complete with a progress bar.
One of the few things that I find lacking in PHP is the ability to report the progress of a file upload. This means that file uploads, especially uploads of larger files, can be extremely frustrating for end users when they don’t know if the upload is progressing or if it has stalled or if it has even started.
He notes that there are two ways around this situation - a patch from Pdoru that has to be applied directly to the PHP install or his method - calling a remote page via an iframe to handle the upload itself. The script sends off the data from the upload form to this other script via the iframe (XMLHttpRequest doesn’t support file uploads) and the Prototype library comined with a PHP script check the file’s upload status and advance the progress bar along.
Of course, the complete code is posted and he even includes links to other sites with other multiple file upload methods as well. He also notes that there are some limitations and possible issues between browsers for the script that he just hasn’t gotten to test with yet.
To be clear, there are exactly two means to achieve this “in” PHP: patching the PHP RFC1867 handler or handing processing off to a script written in a different language. The code highlighted here uses the latter approach, specifically by POSTing the upload to a CGI script written in Perl (the rest of the code is in PHP).
As for the former, Thomas links to a patch worth considering. I wouldn’t bother trying to implement this myself: a quick look at rfc1867.c from the latest release of PHP suggests it’s a very poorly written bit of C code and certainly not the sort of thing you’d ever want to work on (let alone debug or audit for security) while you have better things to do–like, say, breathing.
As for the invisible IFRAME: it’s necessary with either of the above server-side approaches; it’s the client-side mechanism that permits the page to poll the server (using AJAX) for progress information. The IFRAME is the only way this can be achieved since XHR doesn’t support uploads.
Interesting! I’ve made some test based in the same projects, raditha.com (mega upload) & StickBlog ( for multiple file uploads with only one file form field ), but using Jquery instead of Prototype ( more lighter js library ). You can see the results at http://www.obolog.com/upload.php & a little explanation ( in spanish ) at http://obokaman.obolog.com/mensaje/1511
Regards!
obokaman, that looks sweet. wish i could read spanish to give it a try… :(
Now in English — mostly…
I would like to see your code obokaman, you script is cool
This will be an effective part of our web app.
http://www.eirestudio.net, I can’t get it to work :(
sdfssfsfs
çiçek göndermenin en kolay yolu cicekclub.com reklam vernenin ise e-reklamix.com
dsfgsdfgdfsgdfsgdfgsdf
I have made another free ajax upload script that you might want to take a look at. Comments and requests are always welcome on the forum.
Hi,
you can upload progress bar without reloading page and without using AJAX there. Solution is quite simple, you can take a look at demo of first non AJAX upload progress bar. Contact us if have any questions.
Thanks
Ð‘Ð»Ñ Ð±ÑƒÐ´Ñƒ еду! ЗаебиÑÑŒ, ajax
i think it can be made little bit simpler.
its a really stupid code.try it again
it is made very complex,can b made it more simpler
I’m busy implementing this on a blogging site and it seems to be working really well. Haven’t yet tested the implications on system speed, but the initial impressions are good!
obokaman, that app looks fantastic!
any chance of code sharing ?
Is it possible to display thumbnails of the images after they are uploaded? If so, what would the code look like for that? I don’t need to actually see code to create the thumbnail itself, but rather just to display it without refreshing the page.
Also, I’d love to see an example where captions / image description input boxes are also added for each image.
The code is not available showing error 404 for tar file
Anyone know where to find the code for this example? Is there an updated link?
FYI, i am working on a jquery plugin that replaces file input field with a flash-based upload bar, completely unobtrusive. you can find more information here :
http://www.pixeline.be/test/jquery/jqUploader/
Work Nice
Thank You
where is the source code ?
Thanks, that is nice