General, Tools

10 Best AJAX File Uploader for your Web Application

Feb 12, 2010 insic 33 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.

About the 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.

  • http://night-fairy-tales.com/ SM

    Nice collection. Thanks

  • Pingback: 10 uploaders de fichiers en Ajax inratables pour vos web apps !

  • Pingback: 10 Best AJAX File Uploader for your Web Application | INSIC DESIGNS « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  • Pingback: 網站製作學習誌 » [Web] 連結分享

  • http://www.pine-chest-of-drawers.com Milos N.

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

  • Pingback: 10 Ajaxowych uploaderów plików - develway.pl

  • http://www.orphicpixel.com Mars

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

  • http://ditio.net Greg Winiarski

    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!

  • Pingback: Heti események | I build websites

  • http://hungred.com Clay

    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 :)

  • Pingback: Dev day | My Daily Top RSS Selection

  • http://developers.sirika.com/mfu/ Valdelievre

    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

  • Pingback: [Web] 連結分享 | Geek is a Lift-Style.

  • Zac

    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.

  • kathy

    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

      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.

  • http://www.juegosdebobesponja.tv Bob

    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!

  • http://www.plrsifu.com plr

    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.

  • sagar

    sir please give the best uploader version

  • http://shohan.info Shohan

    Great Collection ! Thanks :)

  • Pingback: AJAX image upload possible jquery with preview | SeekPHP.com

  • http://dondedeportes.es AMS

    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.

  • Teo

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

  • http://msmsms.net Mr. Correct
  • andrer

    You can aslo test this for multi ajax upload:

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

  • http://pigeoninfotech.com lingesh

    All collection are fine but they are just hard to use coding . Smart Ajax Upload pakage gives you server side and client side upload functions intract with database. Also it gives you image resize function for the purpose of generating icons from uploaded image.
    Get Instant free download

    http://pigeoninfotech.com/php-ajax-uploader/

  • jon

    the list forgots in my opinion one of the best ajax uploader: http://codecanyon.net/item/real-ajax-multi-uploader/805976

  • Pingback: ajax style file upload « William Jiang

  • http://www.kayseriemlaksayfasi.com Kayseri Emlak

    Nice shared.. thanks for everything

  • http://mememaker.vv.si/ Candra Reza Prasetya Gannes

    nice share
    thanks

  • ruben baakman
  • Fine Uploader

    #3 AJAX Upload by Andrew Valums is now Fine Uploader from Widen Enterprises. Downloads and Documentation available at http://fineuploader.com.

  • Cornélio José Wiedemann

    awesome , man!

    tks dude.
    EuHEAUEAhA