Browsers force us to use file inputs (<input type=”file” />) for uploads, which are impossible to style. Moreover, form-based uploads look obsolete in modern AJAX applications. Today I’m bringing you only high quality AJAX file upload plugins which will help you to enhance your user’s experience.

banner file upload

Uploadify

This is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. Uploadify provides four patterns for your choice, including Single File Upload, Multiple File Upload, Single File Upload – Auto Start, and Single File Upload – Custom Button, Custom Queue. The plugin uses a mix of JQuery, Flash, and a backend upload script of your choice to send files from your local computer to your website server.

uploadify-logo

 search-256x256 Demo download Download

 

Ajax File Upload

You might have seen Ajax File Uploading in some sites. The basic idea is to upload a file without refreshing the page. Some sites go even further by providing details on how much percentage is uploaded, etc. It is very easy to achieve this effect using JavaScript.

Ajax File Upload demo

 search-256x256 Demo

 

jQuery Multiple File Upload Plugin v1.46

It is a unobtrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily. Some basic validation functionality also be provided to help developers identify simple errors, without having to submit the form.

jQuery-Multiple-File-Upload-Plugin

 search-256x256 Demo download Download

uploadprogress v 0.3 – a jQuery + PHP plugin

It is a plugin to augment a standard file upload form with transparent background upload and add upload progress meter to keep users informed of progress.

nixbox upload file demo

 search-256x256 Demo download Download

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. It isn’t true ajax, but brings same user experience. It can support multiple file upload and specify allowed file types.

valums upload file demo

search-256x256 Demo download Download

 

FancyUpload

This is powerful and elegant Ajax uploader. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar.

FancyUpload upload file demo

 search-256x256 Demo download Download

 

Create An Ajax Style File Upload

It will show you how to create Ajax like version of the file upload. The trick is very simple, an Iframe will be used to upload the file so the whole page does not get refreshed and when the post is in progress it will show a dummy progress.

Ajax Style File Upload file demo

 search-256x256 Demo

 

AJAX Multiple File Upload Form

It creates an AJAX multiple file upload form which uses less server side code and provides a very nice user interface. managing upload from upload from input boxes turn to be interesting.

AJAX File Upload Form Using jQuery file upload demo

 search-256x256 Demo download Download

 

Multiple File Upload plugin for jQuery – v1.22

It is a plugin for jQuery to help users easily select multiple files for upload in a concise quick and easy manner. 7 examples are showed in the page. There must be one meet your needs.

Multiple File Upload plugin for jQuery - v1.22 file upload demo

 search-256x256 Demo download Download

 

Super file upload

It provides support for a file upload progress bar. It uses SWFUpload  and also the jquery progress bar plugin. It is very simple to use this plugin.

Super file upload demo

 search-256x256 Demo download Download

 

SWFUpload

SWFUpload is a small JavaScript and flash library to get the best of both worlds – the great upload capabilities of flash and the accessibility and ease of html and css. It allows users to upload multiple files at once by ctrl/shift-selecting in dialog. Users can get information before upload starts. it can work on all platforms/browsers that has Flash support. If Flash or JavaScript is unavailable, it will degrade gracefully to normal HTML upload form.

swfupload file upload demo

 search-256x256 Demo download Download

 

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.

jqUploader

 search-256x256 Demo download Download

 

Uber-Uploader

Uber-Uploader is a group of programs written in Perl, PHP and Javascript. It is intended to present a graphical representation of the status of a web based file upload in the form of a progress bar.

uber

 search-256x256 Demo download Download

 

Gmail like file upload

This is an inherited button control which can perform file upload like in gmail manner. The button uses the inherited IFRAME technique to avoid full page rendering so that user will get a nice experience.

Gmail-like-file-upload

 

 search-256x256 Demo download Download

asynchronous file upload

Asynchronous file uploads is quote popular feature in modern AJAX web-applications. However standard AJAX classes (XmlHttpRequest) does not have capabilities to process or send files selected with file dialog (input type=file). This article contains example application (trivial file-sharing service, like rapidshare, megaupload or yousendit) which uses embedded frames (IFRAME) to upload file. While file is uploaded to hidden frame, user can still access web-page and fill file description field.

If you feel that your favorite plugins are omitted, please share your knowledge with us by leaving a comment, so that we can enrich the contents and share them to the world. thank you.

Related Posts