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.

Posted by Chris Cornutt at 8:36 am
23 Comments

+++--
3.9 rating from 649 votes

23 Comments »

Comments feed TrackBack URI

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.

Comment by dak — March 14, 2006

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!

Comment by obokaman — March 17, 2006

obokaman, that looks sweet. wish i could read spanish to give it a try… :(

Comment by don — March 21, 2006

I would like to see your code obokaman, you script is cool

Comment by the dude — March 21, 2006

This will be an effective part of our web app.

Comment by Nguyá»…n Ä?ức Hoàng — March 22, 2006

http://www.eirestudio.net, I can’t get it to work :(

Comment by Keith Donegan — April 10, 2006

sdfssfsfs

Comment by ddd — May 3, 2006

dsfgsdfgdfsgdfsgdfgsdf

Comment by dfg — July 28, 2006

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.

Comment by Jeremy2 — August 19, 2006

Бля буду еду! Заебись, ajax

Comment by John Backson — December 13, 2006

i think it can be made little bit simpler.

Comment by jyothsna — December 14, 2006

its a really stupid code.try it again

Comment by ilu — December 14, 2006

it is made very complex,can b made it more simpler

Comment by Kishore Kumar Doreshetty — December 16, 2006

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!

Comment by Mark — December 21, 2006

obokaman, that app looks fantastic!

any chance of code sharing ?

Comment by sid — January 26, 2007

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.

Comment by Nate — February 7, 2007

Also, I’d love to see an example where captions / image description input boxes are also added for each image.

Comment by Nate — February 7, 2007

The code is not available showing error 404 for tar file

Comment by Nilesh — February 8, 2007

Anyone know where to find the code for this example? Is there an updated link?

Comment by Nate — February 12, 2007

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/

Comment by Alexandre Plennevaux — February 27, 2007

Work Nice

Thank You

Comment by Ali — August 21, 2007

where is the source code ?

Comment by sonia — September 17, 2007

Thanks, that is nice

Comment by script instalation service — September 20, 2007

Leave a comment

You must be logged in to post a comment.