jQuery in a great library once it comes to creating dynamic client side effects and interactions.
One of its most powerful features is that developers can extend jQuery library by creating their own plugins for adding additional functionality. And there are good few of these plugins created and shared by the community. Here on Enfew we have written several posts about such plugins, creating jQuery based rating systems or jQuery for mobile apps for example. But this time its all about uploading files using jQuery library. We have summarized some great tutorials we found on the web.
1. Uploadify – JQuery File Upload Plugin Script
Uploadify was born out of the need for a multiple file upload utility for a CMS that was being developed. After evaluating the other available options, RonnieSan decided the best option was to build a new plug-in and make it available to the development community. In order to make the plug-in easy to implement and highly-customizable, the jQuery format was chosen. After word got out, the popularity of the plug-in spawned the need for a dedicated site. Travis Nickels volunteered his help to refine the Uploadify plug-in and make it what it is today.
2. jQuery.upload – A simple ajax file upload plugin
jQuery upload is jQuery plug-in to upload files by the Ajax style. It is possible to upload files simply and easily in the same way as jQuery.post and the jQuery.get.
jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.
- Native jQuery event handling using .bind()
- Ability to assign multiple callbacks per event
- Makes multiple SWFUpload instances on a single page easier to manage
- Ability to completely separate SWFUpload object from UI code (callbacks)
- Assign event handlers before SWFUpload instance is even created!
- No global functions or variables needed!
- A nice, chainable solution!
5. Ajax Upload; A file upload script with progress-bar, drag-and-drop.
This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.
This page demonstrates the Form Plugin’s file upload capabilities. There is no special coding required to handle file uploads. File input elements are automatically detected and processed for you.
This jQuery plugin creates a hidden iframe and sets the form’s target attribute to post to that iframe. When the form is submitted, it is posted (including the file uploads) to the hidden iframe. Finally, the plugin collects the server’s response from the iframe.
This pseudo ajax file upload plugin is about 550 bytes minified and gzipped.
getFacebookAlbums is a plugin that allows the user to connect on Facebook and choose a picture among his/her own albums. It’s an alternative to the simple upload form the hard drive disk.
The maximum file size for uploads in this demo is 5.00 MB (default filesize is unlimited).
Files uploaded in this demo are not publicly accessible and will be deleted after 5-10 minutes.
To be able to view your uploaded files Cookies have to be enabled.
Allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.