jQuery Ajax File Upload
Ajax file upload plugin allows users to easily upload multiple files without refreshing the page. In addition, you can use any element to show file selection window.
This plugin creates invisible file input on top of the button you provide, so when user clicks on your button the normal file selection window is shown. And after user selects a file, plugin submits form that contains file input to an iframe. So it isn’t true ajax, but brings same user experience.
Advantages
- AJAX like behaviour using iframe technique. (AJAX does not support file handling)
- Multiple file upload
- Allowed file types can be specified
- Callback functions for all events
| Dependencies | jQuery 1.2 |
|---|---|
| Size | 4KB |
| Restrictions | None (Free to use on any site) |
For demo and download, please check the links
Open Demo | Open demo in new window | Info & Download
Related posts:
- Fancy Upload – Ajax file upload for MooTools
- jQuery Impromptu – alert and confirm replacement with form support
- How to make your forms better with jQuery?
- jQuery BlockUI Plugin
- Three jQuery modal plugins to repace alert and confirm
If you like this post, please share it so that others can also find this
This plugin supports prototype too.
Nice work,
A thumbnail preview of uploaded image would be nice.
nice ajax upload
good, ths
I got the thumbnail to display and remove image function. Check it out at
http://www.diepbachduong.com/index.php/play/img
Very nice !
for craig, maybe you can share to us, your code.
http://www.diepbachduong.com/index.php/play/img
very nice job, some pics resize it will be very useful, craig’s work is well done
Hi Craig,
Is there any way you can share how you were able to implement the thumbnail and remove features? I tried it out, and it looks awesome!
Thanks,
Selina
@miky
@web designer
@Selina
Yes I can show you how.
I am gonna tell you how the original script and my modification work.
When you click a file name to upload, files/images are sent to and stored in server, “pic” folder. During this storing process, you capture the file name by PHP, then send the name back to browser, put it in the “src” attribute, that’s how you have image displayed on browser immediately.
But, you have to resize the image to make it look nice and neat on browser, right? Therefore, before sending the file name back to browser, you have to resize the original image with PHP and rename with key word “thumb” attached to the original name, then store the thumb image in the same folder with original image. There u have the thumb now.
To remove, during storing and resizing process, you send the id or the name of original image to browser and store it in JavaScript variable or in one of the element’s attributes, its your choice. So when u click remove link, you will get the name which was stored in browser, send to server, this is when server know what file name you want to delete. Meanwhile, in your Javascript code, put a snippet to hide/remove the link element and image element from browser view.
Hope that makes sense. Anyway, if it’s too hard to figure out, you can contact me at craigcosmo@gmail.com to get the script.