7 Javascript Ajax File Upload Plugins

7 Javascript Ajax File Upload Plugins


7 Javascript Ajax File Upload Plugins

Introduction

File upload form element has been available for ages, for all the frontend developer, the file upload form element can cause headache because it's very hard to reskin, and it only has the most basic feature - file selection. Now, we have AJAX based file uploader which able to provide instant feedback, file type restriction and some other great feature such as the drag and drop capability of HTML5. 

We have found 7 Javascript Ajax File upload plugins and most of them come with these basic features:

  • Multiple File Uploads
  • Drag and Drop
  • Real-time progress indicators
  • Custom upload restriction

 

Fine Uploader

Fine Uploader makes file-uploading on the web possible in every browser and mobile device. Dependency-free and a 100% JavaScript file uploader, Fine Uploader allows integrators to fine-tune and customize every aspect of the users’ upload experience.

Features include: chunking, auto-resume, auto & manual retry, editing filenames before the upload, auto and manual upload mode, deleting uploaded files (via your local server), optional user interface, drag & drop, upload via paste, upload images via mobile devices, and upload directly to Amazon S3. Learn more at http://FineUploader.com.

 

jQuery File Upload

jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images 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.

 

Pixelcone Fileuploader

Pixelcone Fileuploader

jQuery fileuploader uses html5 api which support ajax upload and drag and drop, and fallback to iframe upload for legacy browsers. It creates multiple forms to process multiple uploads. Each form can be processed by single upload script.

 

Plupload

Plupload

The developers of TinyMCE brings you Plupload, a highly usable upload handler for your Content Management Systems or similar. It supports chunking, drag & drop, image resize, file size restriction, upload progress and etc.

 

Uploadify

Uploadify

Uploadify™ is a jQuery plugin that allows you to easily add multiple file upload functionality to your website. Two distinct versions (HTML5 and Flash) allow you the flexiblity to choose the right implementation for your site and fallback methods make it degrade gracefully. It supports multiple file uploads, drag and drop, real-time progress indicators and a lot of customization.

 

Ajax File Upload

Ajax File Upload

This AjaxFileUpload Plugin is a hacked version of Ajaxupload plugin created by yvind Saltvik, which is really good enought for normal use. Its idea is to create a iframe and submit the specified form to it for further processing. In this hacked version, it submits the specified file type of input element only rather than an entire form. Unlike the rest, this version is a bit dated and won't have HTML5 feature.

 

jQuery FileDrop

jQuery filedrop uses the HTML5 File API to allow users to drag multiple files from desktop to the browser, uploading each file to a user-specified URL. filedrop uses HTML5 FileReader() to read file data.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

19 comments

Abdul Jabbar
Sat, 22nd September 2012
Great Collections! Awesome Man!. Thanks for such Contents. May ALLAH be please with you. You did just great work. really helpful. Reply
GreenLiquid
Mon, 19th November 2012
I love plupload. easy to use Reply
RP
Wed, 12th December 2012
thx. i am looking for an uploader which gives an option of: does any of these do that?

0. [MUST HAVE] seamless integration with any jQueryUI theme.
1. changing the filename before saving on server.
2. returns back the name of saved files, so that they can be displayed back on page. Reply
Some Guy
Fri, 11th January 2013
Figured I'd give a short warning.. We used an older version of Uploadify and have been noticing increasing issues. We have tried to update but the newer version has minor issues that have become a deal breaker for us (hence why I am at this page). The lack of response to the issues as well as no response to our inquiries into the HTML5 paid for version have left us scrambling to find an alternative. The copious amounts of spam on their forums haven't left us with a good impression either.
Uploadify may work for your purposes but we have found that some of the bugs and weirdness in expected behavior and the way it does work make this script unusable for us. Reply
Kevin Liew Admin
Fri, 11th January 2013
I have been using the paid HTML5 version, I have to agree with you, I have encountered a few issues and also lack of support is one of the major problem as well. The documentation isn't good enough. Reply
Ronald Davis
Wed, 29th May 2013
I agree, I paid 5.00 and it was trash. and as for the support i am at a lost for words. the system i ever used Reply
Dev Guy
Fri, 1st February 2013
I recommend against the first item " JQuery File Upload". This project has a very large footprint and the code is very complex. The simple example with PHP upload is not as advertised and has bugs. It's not something that is easily debug-gable by a non-AJAX expert, and the error messages returned in JSON (abort) are mysterious. Given that so much work has gone into it, one would think it'd be easier to debug this component. They seem to be the go-to component on Google when searching for jQuery uploader but I simply don't think this is easy to use. Thumbs way down. Reply
Dimitar Ivanov
Mon, 4th March 2013
Thanks!
For iframe uploads see http://zinoui.com/demos/upload Reply
Dimitar Ivanov
Sun, 12th May 2013
Now support XmlHttpRequest upload and fallback to IFRAME upload for old browsers. Reply
Valar Morghulis
Sat, 13th April 2013
Here is another one to check out:

https://github.com/LPology/Simple-Ajax-Uploader

Small footprint, works in older browsers, easy to customize. Reply
joe
Tue, 25th June 2013
'Ajax File Upload' plugin is complete shit. Reply
Paul Scholes
Tue, 20th August 2013
Fine Uploader should be at the top. It's actively maintained. Support is outstanding. The codebase is organized and simple to debug. Yeah, it's $45 for a commercial license, but that guarantees you so much. Reply
Kevin Admin
Wed, 4th September 2013
It's at the top now ;p Reply
Bid
Mon, 7th October 2013
Fine Uploader has the most terrible documentation ever.
And it costs $800 for 1 SaaS project. Reply
Inga
Wed, 8th January 2014
Here is another addition to your collection of JavaScript file uploaders:
http://www.dhtmlx.com/docs/products/dhtmlxVault/index.shtml

dhtmlxVault supports drag-and-drop, multiple file upload, progress bar (shows percentage or ETA), and custom file upload restrictions. The PRO edition is not free ($99 for site/app) but there is also free GPL-ed version. Reply
John Sams
Tue, 4th March 2014
I'd also suggest http://www.anowave.com/anofile-jquery-ajax-file-upload/ to be included as part of this great collection. It's ultra lightweight and specifically designed for developers which need something small that can be modified quickly. It's less than ~2 KB after all. Reply
Mister
Sat, 8th March 2014
Your upload thing is not working in Safari Reply
Anoop
Sun, 23rd November 2014
Hello Guys,

All this are using some kind of javascript plugins, Here is the script that is used only native javascript and PHP

http://sellcode.in/simple-javascript-file-upload/

Checkout this link

Thanks
Anoop Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement