I’ve been looking for an Ajax upload plugin for jQuery yesterday. And actually I found some interesting solutions, but any of then did what I wanted.

I needed a multi file upload. I had a form with many file inputs and I wanted it to just works, using Ajax. The options available that supports multi file upload (without flash), are limited to just one file input, and you can choose more that one file from it. It’s nice, but not what I needed.

Then I found this one: Ajax File Upload. It only supports one file input too, but I’ve hacked it to support more that one, and still be able to send more data (the other fields values of my form) to the server.

Internally it creates a new form, and put it inside an iframe, and so on. Well, it just works, and it was easy to modify for my needs.

Usage

$.ajaxFileUpload({
    url : '/url/to/post/',

    // here you pass a jQuery selector with all your file inputs.
    // this is the main change I've made, in the original version you had to pass an
    // ID of you file input
    fileElements : $('input[type=file]'),

    // also supports json, xml and script
    dataType : 'html',

    success : function(response) {
        alert('hey, it worked')
    },
    error : function(xhr, status, error) {
        alert("you've got a problem here")
    },

    // here you pass an object with all extra data you want to send.
    // it didn't existed in the original version
    extraData : {foo: 'bar'}
});

Download

You can download it here. And the original can be found here, you will find more usage examples there too.

If you’re insterested, here is the diff with my changes.

I hope it’s useful for you too.