HTML5 file API + ajax file upload sample

var $files = [];
XMLHttpRequest.prototype.send = function (data) {
    return this.sendAsBinary(data);
};

function filesSelected(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        $files.push(file);

        var reader = new FileReader();
        reader.onload = function(event){
            var img = document.createElement('img');
            img.src = reader.result;
            img.width = img.height = 32;
            $('#preview').append(img);
            upload(event);
        };
        reader.readAsDataURL(file);
     };
}
function onFileOver(e) {
    e.preventDefault();
    e.stopPropagation();
}
function onFileDrop(e) {
    e.preventDefault();
    e.stopPropagation();

    filesSelected(e.dataTransfer.files);
}
function upload(e){
    e.preventDefault();
    e.stopPropagation();

    for (var i = 0; i < $files.length; i++){
        var file = $files[i];
        var reader = new FileReader();
        reader.onload = function(event){
            $.ajax({
                url : '/upload',
                type : 'post',
                data : reader.result,
                dataType : 'json',
                success : function(data){
                    $.each(data, function(index,elem){
                        if (elem.match(/saved as (.*)$/)) {
                            var m = RegExp.$1;
                            $('<a>').attr('href', '/' + m).text(m).wrap('<p>').appendTo('#response');
                        } else {
                            $('<p>').text(elem).appendTo('#response');
                        }
                    });
                    $('.indexes').show();
                }
            });
        };
        reader.readAsBinaryString(file);
    }
}

$(document).ready(function(){
    $('.indexes').hide();
});

<h2>drag & drop area</h2>
<form>
  <div
        style="width: 500px; height: 100px; border: 1px solid gray;"
        ondragover="onFileOver(event)"
        ondrop="onFileDrop(event)">
    drag & drop here
  </div>
</form>
<h2>image preview area</h2>
<div id="preview"></div>
<h2>ajax request response area</h2>
<div id="response"></div>
<h2 class="indexes">uploaded files</h2>
<div class="indexes"><a href="/indexes">check uploaded files</a></div>