« »

PHP/Javascript File Uploader

Recently 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:

WAITING Waiting for the use to select a file.
UPLOADING Upload in progress.
SUCCESS Sucess, file has been uploaded!

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.

download

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

  • Share/Bookmark

Posted on Thursday, August 2nd, 2007 at 7:46 am and is filed under Javascript, Php. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “PHP/Javascript File Uploader”

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

    and where is the code? :)

  6. 6

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

  7. 7

    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

  8. 8

    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.

  9. 9

    Jillian: Glad you found it useful!

Leave a Reply