Drag and Drop Multiple Files from Desktop/Browser. Select Multiple files from File Input. Submit to a URL of your choosing with the params you need. Work in Progress. Uses Underscore for easy templates.

Uploadosity.js

/* 
 * Uploadosity will take a container and turn it into a drag and drop BEAST.
 * Give it a URL to send the data, any extra params.
 * If you have an file input box you can specify that to add it to the list.
 */
(function( $ ){
  var methods = {
    uid: 0,
    init : function( options ) { 
      var defaults = {
            url: '/',
            file_li:
              "<li class='<%= uid %> processing'>" +
                "<span class='file-name'><%= file.fileName %></span>" + 
                "<span class='file-size'>" +
                  "<% if(file.fileSize > 1073741824) { %>" +
                    "<%= Math.round(file.fileSize / 1073741824) %> GB" +
                  "<% } else if(file.fileSize > 1048576) { %>" +
                    "<%= Math.round(file.fileSize / 1048576) %> MB" +
                  "<% } else if(file.fileSize > 1024) { %>" +
                    "<%= Math.round(file.fileSize / 1024) %> KB" +
                  "<% } else { %>" +
                    "<%= file.fileSize %> Bytes" +
                  "<% } %>" +
                "</span>" + 
                "<span class='status'>Processing...</span>" + 
              "</li>",
            params: '',
            file_input_box: null
          },
          settings = $.extend({}, defaults, options);
      
      return this.each(function (i) {
        var $this = $(this);

        if ( ! $this.data('uploadosity') ) {
          $this.data('uploadosity', settings);
        }
      
        $this[0].addEventListener('dragenter', methods.cancel_drag_event, false);
        $this[0].addEventListener('dragover', methods.cancel_drag_event, false);
        $this[0].addEventListener('dragexit', methods.cancel_drag_event, false);
        $this[0].addEventListener('drop', function(e) {
          methods.upload_drug_files(e, $this)
        }, false);
        
        if(settings.file_input_box != null) {
          $(settings.file_input_box).bind('change', {obj: $this}, methods.upload_selected_files);
        } 
        
      });
    },
    
    getUID: function() {
      methods.uid++;
      return 'file-' + methods.uid;
    },

    upload_drug_files: function (e, obj) {
      methods.cancel_drag_event(e);

      methods.upload_files(e.dataTransfer.files, obj);
    },

    upload_selected_files: function (e) {
      var $this = e.data.obj, data = $this.data('uploadosity');
      
      methods.upload_files($(data.file_input_box)[0].files, $this); // Get FileList
    },

    upload_files: function (files, obj) {
      for(var i = 0; i < files.length; i++) {
        var uid = methods.getUID();
        
        //Using Underscore here
        var template = _.template(obj.data('uploadosity').file_li);
        var li = template( {file: files[i], uid: uid} );
        obj.find('ul').append(li);

        methods.send_file(files[i], obj);
      }

      // If there are more than 2 Uploads, shrink the "Drop Files Here... OR Choose Files..."
      if(obj.find('li').length > 2) {
        obj.addClass('loaded');
      }
    },

    send_file: function (file, obj) {
      var xhr = new XMLHttpRequest();

      xhr.upload.addEventListener('progress', methods.upload_progress, false);
    	xhr.addEventListener('load', methods.upload_complete, false);
    	xhr.addEventListener('abort', methods.upload_canceled, false);
    	xhr.addEventListener('error', methods.upload_failed, false);

    	xhr.open("post", obj.data('uploadosity').url + obj.data('uploadosity').params, true);
    	xhr.setRequestHeader("Cache-Control", "no-cache");
    	xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    	xhr.setRequestHeader("Content-Type", "multipart/form-data");
    	xhr.setRequestHeader("X-File-Name", file.fileName);
    	xhr.setRequestHeader("X-File-Size", file.fileSize);
    	xhr.send(file);
    },

    cancel_drag_event: function (e) {
      e.stopPropagation();
      e.preventDefault();
      return false; // required by IE
    },
    
    upload_progress: function(evt) {
      if(evt.lengthComputable) {
        console.log((evt.loaded / evt.total) * 100 + "%"); 
        // ToDo, be able to select the inserted template and update the element
      }
    },
    
    upload_complete: function(load) {
  	  console.log(load);
  	  // ToDo, be able to select the inserted template and update the element
  	},
  	
  	upload_canceled: function() {
  	  // ToDo, be able to select the inserted template and update the element
  	},
  	
  	upload_failed: function(e) {
  		console.log(e);
  		// ToDo, be able to select the inserted template and update the element
  	}
    
  };
  
  $.fn.uploadosity = function( method ) {
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }
  };
  
})( jQuery );