10 Best AJAX File Uploader for your Web Application

12. Feb, 2010 25 Comments

Most of the web application available today includes a capability of user to upload files, whether it is a social media application or a CMS/Blogging platform. Upload capability of your application can be made easier and usable to the user if you are using one of these Ajax Upload Script and Plug-in.

1. FancyUpload

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.

2. Uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Uploadify is available under the GPL and MIT licenses. This allows Uploadify to be used in a number of applications and commercial products.

3. AJAX Upload by Andrew Valums

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and doesn’t require any library to run. AJAX Upload doesn’t pollute the global namespace, and is tested with jQuery, Prototypejs.

4. AJAX Multiple File Upload Form Using jQuery

This is another variant of fileuploader from webdeveloperplus using the jQuery library and AJAX Upload by Andrew Valums.

5. LightLoader

LightLoader employs a similar method to what is found in the GMail file upload, using a hidden IFRAME to post the file and AJAX to check the progress. There is also a tester script in the zip file for you to upload to your server to make sure that you have all the settings correct.

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

The plugin uses the form action attribute value (normally pointing to a server side script handling the upload and other data manipulations, and appends a variable “jqUploader=1″ so that the upload code is initiated when it sees that key/value is on the posted data.

7. SWFUpload

SWFUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS.

8. uploadprogress – a jQuery + PHP plugin

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

9. jQuery Multiple File Upload Plugin

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.

10. AJAX file upload by Webtoolkit

Do you know something that is not included in the list? Please hit the comment and I am happy to add them.

PG

Author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

Related Post

Delicious
General, Tools
, , ,

25 Responses to “10 Best AJAX File Uploader for your Web Application”

  1. SM Reply 13. Feb, 2010 at 3:17 am

    Nice collection. Thanks

  2. Milos N. Reply 13. Feb, 2010 at 10:18 am

    Very nice collection. Will use it for sure on some of my sites.

  3. Mars Reply 14. Feb, 2010 at 3:30 am

    this is a nice collection, and by the way can we do an exchange link

  4. Greg Winiarski Reply 14. Feb, 2010 at 6:16 am

    I admit nice list of uploaders, although the title is a bit misleading since some of them relay on Flash rather then AJAX.

    Either way, great work!

  5. Clay Reply 20. Feb, 2010 at 10:31 pm

    i don’t think its possible to send file over using XMLHttpRequest. I agree with @Grey that this title is quite misleading. Nonetheless, great collection :)

  6. Valdelievre Reply 10. May, 2010 at 2:41 am

    Hi,
    Thanks for this collection, i struggled to find good uploader with progress bar

    I wanted to submit you mine as well :
    http://developers.sirika.com/mfu/

    Hope it will help

  7. Zac Reply 27. Aug, 2010 at 10:47 pm

    Ive used Fancy Upload 3 different times, in 3 different ways, and was more than happy with it 3 times. Theres really nothing you cant do with it. Its like the jQuery Cycle plugin of the File Upload world.

  8. kathy Reply 12. Sep, 2010 at 12:15 am

    which do you think is the easiest to implement for wordpress theme options? i had valum’s ajaxupload working until he released a new version in august and now i get no joy as the $_FILES array is perpetually empty.

    • BB Reply 16. Mar, 2011 at 9:54 am

      Kathy: Valum’s script does have an example for how to handle XHR uploads in the php.php under the server folder. That’s what more advanced browsers use instead of the older iframe file upload method that uses the $_FILES array.

      That, however, is probably not the answer you want. Rather, you want Valum’s script to perform like it did before so you don’t need to modify the server-end code. To do that, go to your fileuploader.js script and modify this function (roughly line 1130):

      qq.UploadHandlerXhr.isSupported = …

      In the first line of the function, add the following:

      return false;

      That will force the file uploader to always use the iframe method, which uses the $_FILES array rather than the XHR data appended to the request. Note that this will prevent multiple file uploads and probably the drag-and-drop as well.

  9. Bob Reply 04. Feb, 2011 at 6:22 pm

    Great! Very usefull for my script, for upload thumbnails and pictures, thank you very much, I hope use Uploadify I think can better for my script. Thank you very very much!

  10. plr Reply 08. Jun, 2011 at 3:49 pm

    I’ve been using uploadify but just now found out that its only good for files smaller than 10MB. Although i’ve changed the php.ini file upload size limit. The file uploading itself is done via PHP FILE parameters. Only the interface if ajax. I’m using Fancyupload now, and happy to report that its shaping up to be quite awesome.

  11. sagar Reply 08. Aug, 2011 at 3:17 am

    sir please give the best uploader version

  12. Shohan Reply 13. Sep, 2011 at 11:01 am

    Great Collection ! Thanks :)

  13. AMS Reply 11. Oct, 2011 at 1:52 pm

    Hi,

    I’d like to add to your list an Ajax jQuery plugin. It requires php on server side but no Flash.

    The UploaderPreviewer performs a dynamic upload of an image when it is selected in a form and previews it.

    A demo of the plugin can be found here:

    http://dondedeportes.es/uploaderPreviewer

    Hope it is useful for anyone.

  14. Teo Reply 20. Oct, 2011 at 10:23 pm

    I think that you should add the following FileUpload control also: http://www.obout.com/Obout.Ajax.UI/FileUpload/index.aspx

  15. Mr. Correct Reply 01. Nov, 2011 at 10:10 pm

    Please fix your link it’s broken.

    Replace this.
    http://demo.webdeveloperplus.com/ajax-file-upload/

    With this.
    http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/

  16. andrer Reply 25. Nov, 2011 at 11:22 am

    You can aslo test this for multi ajax upload:

    https://github.com/atmoner/Easy-Ajax-Upload

Leave a Reply