Best jQuery File Upload Plugins

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 is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.

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.

3. jqUploader

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.

4. SWFUpload jQuery Plugin

• 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.

6. jQuery Form Plugin

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.

7. Really simple jQuery Ajax File Uploader plugin.

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.

8. Get User Facebook Albums and Pictures

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.

9. File Style Plugin for jQuery

Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

10. jQuery Multiple File Upload Plugin v1.47

The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files).

11. jQuery File Upload

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.

12. Plupload

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.