I've been breaking making websites for over 15 years.

PHP/Javascript File Uploader

Posted on August 2, 2007 at 7:46 am

uploadRecently one of our clients was in need of the ability to upload files to their webserver. This was easily accomplished with PHP’s built in functionality. But the draw back to this approach was that end-user had little or no indication that anything was happening.

Now we all know what happens. Typical scenario: User clicks a button. Seemingly nothing happens… *click*…. *clickety-click*… *CLICK CLICK CLICK*. Refresh, Reload. We all know how impatient some people can get. Specially when they don’t see the immediate gratification that is seeing something react when you push a button.

So I threw together a little script that hopes to alleviate that.. at least for some people. What this script does is lets the user select the file they want to upload, and immediately begins the process of uploading the file, showing the use an animated progress-type bar, and updating a status bar that they can read to see how the download is proceeding. It’s not too complicated really, but I thought someone could find it useful.

Here are some screenshots of the script in action:

Now, I just kind-of cut-and-pasted it right out of the site I have it running at, and removed a few site-specific blocks of code, and I haven’t tested it as is yet… but it _should_ work. 😉 It originally was meant for profile pictures, but I removed out any code that restricted the file type, so it should work for anything. I’ve compiled the uploader.php file and two image files along with it into a zip file for downloading convenience.

[drain file 2 icon]

  • [drain file 2 url DFN-Fileuploader]
  • Size: [drain file 2 size]
  • Hits: [drain file 2 hits]

Try it out, lemme know whatcha think. If there is enough interest I may re-work it and add extended functionality and flexibility.


Written by

John is a web-developer by day, dashing, handsome, and death-defying super-hero by night. Based out of Silver Spring, MD, he does his best to make things do things other than the things they were supposed to on a daily basis, in the process, making the world a better place.

There are 9 comments.

Comment by John

I was going to check this out, but there’s no link to the download 🙁

SEP07 2008 14:09:00
Comment by digifuzz

Strange, it was there last time I checked it. 🙂 I’ll get it fixed.

SEP08 2008 09:10:00
Comment by AI

Yeah, there is still no link to d/l.

SEP16 2008 05:30:00
Comment by KJ

Where is the link? Could you email me the code?

SEP29 2008 12:07:00
Comment by 87fguhuolbh

and where is the code? 🙂

MAY19 2009 11:48:00
Comment by lail

U’re smart, but u’re STINGY. Sorry.

NOV13 2009 09:27:00
Comment by digifuzz

So a year and a while later, I finally got the link fixed and the file is again available for download. Sorry about that. 🙂

~ d

NOV19 2009 11:56:00
Comment by Jillian Calderon

I was using uploadify but a couple of weeks ago it suddenly stopped firing the oncomplete event to execute the rest of my code. Even though it still uploaded the file, the user had no way of knowing it did. All they saw was a progress bar that went to 100% in a second and seemingly did nothing. I didn’t succeed in debugging it, so I wanted a different solution. Then, I found your code. Thanks for posting this. 🙂 After much debugging I was able to get this to work for me. I use window.stop() to cancel the upload. The only thing it’s missing is a progress bar that tracks the % of the file uploaded and I’m not even sure how to start implementing something like that here.

JAN26 2010 20:59:00
Comment by digifuzz

Jillian: Glad you found it useful!

MAR06 2010 08:54:00

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

By submitting a comment you grant digifuzz.net a perpetual license to reproduce your words and name/web site in attribution. Inappropriate and irrelevant comments will be removed at an admin’s discretion. Your email is used for verification purposes only, it will never be shared.