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 for the use to select a file.
Upload in progress.
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.
[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.
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.