16 Free jQuery File Upload Plugins and Tutorials

Today’s collection of 16 Free jQuery file upload plugins and tutorials that will let visitors upload files from your computer or filemanager and  browsers with drag and drop, and multiple file selection features.

How to Create Mini Ajax File Upload Form with jQuery

Tutorialzine has shared a tutorial: Mini AJAX File Upload Form, which tell us how to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually. Read Tutorial 



jQuery AJAX File Upload Progress

Plugin to augment a standard file upload form with transparent background upload and add uploadprogress meter to keep client informed of progress. GET IT 

jQuery AJAX File Upload Progress 1


Open Source Drag & Drop File Uploads with Dropzone.js

Dropzone.js is an open source library that provides drag’n’drop file uploads by simply including a java-script file. It views previews of images and you can register to different events to control how and which files are uploaded. Download Link 



jQuery File Upload Plugin

File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads. GET IT



jQuery HTML5 Uploader

jQuery HTML5 Uploader is a lightweight jQuery plugin that lets you to quickly add an upload system a-la-Gmail into your web app. You only need to create a dropbox element (i.e. a div) and jQuery HTML5 Uploader will do the rest. Then you can drag & drop one or more files on the element and the files will be uploaded. GET IT 

jQuery HTML5 Uploader 1



This jquery plugin 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. Download Link




HTML5 or Flash Multiple File Upload jQuery Plugin Script GET IT 




Droparea is a HTML5 drag and drop image/file upload jQuery plug-in and a php script for server-side. GET IT 




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 . GET IT 



Ajax Upload

Ajax Upload is 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. Download 

Ajax Upload


SWFUpload jQuery Plugin

Using jQuery (the solution to all things painful), I’ve written a plugin to create a real event dispatcher for SWFUpload without modifying the SWFUpload core! GET IT 

SWFUpload jQuery Plugin


Uploading Files with AJAX

Today, I’m going to show you how to do something that—until the last while—has been almost unprecedented: uploading files via AJAX. Read tutorial 

Uploading Files with AJAX


Code Samples

There is no special coding required to handle file uploads. File input elements are automatically detected and processed for you. GET IT 

code sample 2


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. GET IT 

File Style Plugin for jQuery


How to Upload Files with CodeIgniter and AJAX

Uploading files asnychronously can be a pain at the best of times, but when coupled with CodeIgniter, it can be a particularly frustrating experience. Read tutorial

Upload Files with CodeIgniter and AJAX


Really simple jQuery Ajax File Upload plugin

This jQuery ajax upload 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. GET IT



Written by Kirushananthan