Upload Image Using AJAX with Progress Indicator

I used that snippet on several of my websites, it handles Multiples files upload, drag and drop, and a progress bar.

HTML

You will need a container to drop your batch of files, in our case it will be #output, and a list of files.

JS

First we will push the dataTransfer to jQuery's event and bind the drop event.

$(document).ready(function(){
    // We add the dataTransfer special property to our jQuery event
    $.event.props.push("dataTransfer");
    
    // We bind events for drag and drop
    $('#output').bind({
        "dragenter dragexit dragover" : do_nothing,
        drop : drop
    }); 
    
});
// stop event propagation
function do_nothing(evt){
    evt.stopPropagation();
    evt.preventDefault();
}

Then we build our update progress function

// Progress bar update function
function update_progress(evt,fic) {
    
    var id_tmp=fic.size;
    //id_tmp help us keep track of which file is uploaded
    //right now it uses the filesize as an ID: script will break if 2 files have the     
    // same size
    if (evt.lengthComputable) {
        var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
        if (percentLoaded <= 100) {
            $('#'+id_tmp+' .percent').css('width', percentLoaded + '%');
            $('#'+id_tmp+' .percent').html(percentLoaded + '%');
        }
    }
}

Last but not least our drop function

function drop(evt){
    do_nothing(evt);
        
    var files = evt.dataTransfer.files;
    
    // Checking if there are files
    if(files.length>0){
        for(var i in files){
            // if its really a file
            if(files[i].size!=undefined) {
                
                var fic=files[i];
                
                // We add a progress listener
                xhr = jQuery.ajaxSettings.xhr();
                if(xhr.upload){
                    xhr.upload.addEventListener('progress', function (e) {
                        update_progress(e,fic);
                    },false);
                }
                provider=function(){ return xhr; };
                
                // We build our FormData object
                var fd=new FormData;
                fd.append('fic',fic);
                
                // For each file we build and Ajax request
                $.ajax({
                    url:'/path/to/save_fic.php',
                    type: 'POST',
                    data: fd,
                    xhr:provider,
                    processData:false,
                    contentType:false,
                    complete:function(data){ 
                        //on complete we set the progress to 100%
                        $('#'+data.responseText+' .percent').css('width', '100%');
                        $('#'+data.responseText+' .percent').html('100%');
                    }
                });
                        
                
                // for each file we setup a progress bar
                var id_tmp=fic.size;
                $('#output').after('<div class="progress_bar loading" id="'+id_tmp+'"><div class="percent">0%</div></div>');
                $('#output').addClass('output_on');
                
                // We add our file to the list
                $('#output-listing').append('<li>'+files[i].name+'</li>');
                
            }
        }
    }

}

That method doesn't work in IE9 or below. Hope it helped! Source(in french)

Some infos on progress tracking using XMLHttpRequest

Some infos on the datatransfer prop

EDIT:

PHP

From the server side you can handle the files normally using $_FILES etc... In order to set the progress to 100% in the complete function your php script must echo the filesize.