Jquery Plugin for HTML5 File Upload

After the introduction of HTML5 the multiple file upload without flash script is possible. jQuery File Upload is a nice plugin for handling multiple file uploads with HTML5. For legacy browsers it falls back to an Ajaxed-like iframe-PHP solution.

Multiple files can be selected for upload, a user  even be drag ‘n’ dropped from the desktop and the upload process can start automatically or just click the upload button and select multiple files.

A progress bar can display the status and uploads can be canceled anytime.

It is possible to use multiple instances of the plugin in the same page and jQuery File Upload is compatible with any server-side application platform.

The plugin is developed by © Sebastian Tschan and in the source code various server side scripts are also provided.

You can view the Jquery File Upload Demo.

Download the source code on git hub

Basic plugin information

• Demo page (and Demo implementation information).
• How to Setup the plugin on your website.
• How to use only the Basic plugin (minimal setup guide).
• The plugin API.
• List of all available Options – including callback methods.
• Explanation of all Plugin files.
• Extended Browser support information.
• Frequently Asked Questions (FAQ)

Customization how-tos

• Plugin extensions (Developer Guide)
• How to implement a different Template Engine.
• Performance Optimizations to speed up page load times.
• Style Guide with explanations for the provided CSS code.
• Using the plugin with jQuery UI.
• How to submit additional Form Data.
• Multiple File Upload Widgets on the same page
• Multiple File Input Fields in one Form.
• How to implement Chunked file uploads.
• Cross domain uploads (Cross-site uploads).
• How to add Drop zone effects.
• How to display Extended progress information.
• Drag and drop uploads from another web page
• Fixing Safari hanging on very high speed connections (1Gbps)

Server-side specific tutorials

Python (Google App Engine, Django, web2py)

• How to use the plugin with Google App Engine (Python).
• Django integration tutorial and demo code (user contribution).
• Same Django reusable Plugin and article (user contribution).
• Another Django integration (user contribution).
• Django >= 1.2.5 integration with CSRF enabled repo wiki (user contribution).
• web2py (Python framework) port (user contribution).

Java

• Code samples for Google App Engine Java (user contribution).

 

Ruby (Rails)

• Using the plugin to Upload directly to S3 (user contribution)
• Rails + (Carrierwave || Dragonfly) Rails-setup-for-V5 (user contribution)

PHP

• Zend-framework integration (user contribution).
• jQuery-File-Upload,—Multi-file-upload-with-CodeIgniter (user contribution)
• PHP Subfolder example
• PHP Session Upload Progress

So a developer can easly adopt this plugin to his projects and can build a media or asset manager easly. Media Manager for codeigniter and Zend framework are a great plus for a project.

Related articles

• Best Of 2011: Best Useful jQuery Plugins And Tutorials (smashingapps.com)
• 40+ Useful and Fresh jQuery Plugins (noupe.com)
• Basic Simple jQuery Content Slider with Themes (smashingweb.ge6.org)
• Getting “Too much recursion” error while using jQuery form plugin (stackoverflow.com)
• Check whether file is uploaded (stackoverflow.com)
• Blueimp JQuery file upload with MVC 3 (stackoverflow.com)
• jquery file upload plugin which remembers the previously uploaded files (stackoverflow.com)
• Upload files from http to iphone (stackoverflow.com)
• fixing file uploads in croogo (iammikek.wordpress.com)