Iniciar upload automaticamente ao selecionar arquivos

[Josias Bueno 0]

Pessoal, tenho um sistema com galeria de fotos que faz o upload múltiplo via Ajax e PHP.

O código está funcionando direitinho, mas gostaria que ele iniciasse o envio dos arquivos assim que o usuário os selecionasse no campo input file.

Eis o código javascript

function multiUploader(config){
  
	this.config = config;
	this.items = "";
	this.all = []
	var self = this;
	
	multiUploader.prototype._init = function(){
		if (window.File && 
			window.FileReader && 
			window.FileList && 
			window.Blob) {		
			 var inputId = $("#"+this.config.form).find("input[type='file']").eq(0).attr("id");
			 document.getElementById(inputId).addEventListener("change", this._read, false);
			 document.getElementById(this.config.dragArea).addEventListener("dragover", function(e){ e.stopPropagation(); e.preventDefault(); }, false);
			 document.getElementById(this.config.dragArea).addEventListener("drop", this._dropFiles, false);
			 document.getElementById(this.config.form).addEventListener("submit", this._submit, false);
		} else
			console.log("Browser supports failed");
	}
	
	multiUploader.prototype._submit = function(e){
		e.stopPropagation(); e.preventDefault();
		self._startUpload();
	}
	
	multiUploader.prototype._preview = function(data){
		this.items = data;
		if(this.items.length > 0){
			var html = "";		
			var uId = "";
 			for(var i = 0; i<this.items.length; i++){
				uId = this.items[i].name._unique();
				var sampleIcon = '<i class="fa fa-image"></i>';
				var errorClass = "";
				if(typeof this.items[i] != undefined){
					if(self._validate(this.items[i].type) <= 0) {
						sampleIcon = '<i class="fa fa-exclamation-circle"></i>';
						errorClass =" invalid";
					}
					//html += '<div class="dfiles'+errorClass+'" rel="'+uId+'"><h5>'+sampleIcon+this.items[i].name+'</h5><div id="'+uId+'" class="progress" style="display:none;"><img src="img/_ajax-loader.gif" /></div></div>';
				}
				$('li.dragAndDrop').after('<li class="foto" rel="'+uId+'">\
											<span class="mailbox-attachment-icon has-img">\
												'+sampleIcon+'\
												<h5 style="margin: 0 5px;">'+this.items[i].name+'</h5>\
											</span>\
										</li>');
			}
		}
	}

	multiUploader.prototype._read = function(evt){
		if(evt.target.files){
			self._preview(evt.target.files);
			self.all.push(evt.target.files);
		} else 
			console.log("Failed file reading");
	}
	
	multiUploader.prototype._validate = function(format){
		var arr = this.config.support.split(",");
		return arr.indexOf(format);
	}
	
	multiUploader.prototype._dropFiles = function(e){
		e.stopPropagation(); e.preventDefault();
		self._preview(e.dataTransfer.files);
		self.all.push(e.dataTransfer.files);
	}
	
	multiUploader.prototype._uploader = function(file,f){
		if(typeof file[f] != undefined && self._validate(file[f].type) > 0){
			var data = new FormData();
			var ids = file[f].name._unique();
			data.append('file',file[f]);
			data.append('index',ids);
			$(".dfiles[rel='"+ids+"']").find(".progress").show();
			//$('#multiUpload,#submitHandler').slideUp();
			$.ajax({
				type:"POST",
				url:this.config.uploadUrl,
				data:data,
				cache: false,
				contentType: false,
				processData: false,
				beforeSend:function(){
					$('li.foto i.fa.fa-image').removeClass('fa-image').addClass('fa-spinner fa-spin');
				},
				success:function(rponse){
					$("#"+ids).hide();
					var obj = $(".dfiles").get();
					$.each(obj,function(k,fle){
						if($(fle).attr("rel") == rponse){
							$(fle).slideUp("normal", function(){ $(this).remove(); });
						}
					});
					if (f+1 < file.length) {
						self._uploader(file,f+1);
					}
					$('li[rel="'+ids+'"]').replaceWith(rponse);
				}
			});
		} else
			console.log("Invalid file format - "+file[f].name);
	}
	
	multiUploader.prototype._startUpload = function(){
		if(this.all.length > 0){
			for(var k=0; k<this.all.length; k++){
				var file = this.all[k];
				this._uploader(file,0);
			}
		}
	}
	
	String.prototype._unique = function(){
		return this.replace(/[a-zA-Z]/g, function(c){
     	   return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
    	});
	}

	this._init();
}

function initMultiUploader(){
	new multiUploader(config);
}

Eis também um pedaço do arquivo HTML, com as partes importantes...

<ul class="mailbox-attachments clearfix">
    <li class="dragAndDrop">
        <form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
            <input type="file" name="multiUpload" id="multiUpload" style="display: none;" multiple />
            <input type="hidden" name="referencia" id="referencia" value="<? echo $AlbId ?>" />
            <div class="progressBar">
                <div class="status"></div>
            </div>
            <span class="mailbox-attachment-icon drag" style="border: dashed thin; height: 132px" id="dragAndDropFiles">
                <a href="#" class="mailbox-attachment-name add-foto" title="Adicionar fotos" data-toggle="tooltip" data-placement="right" onclick="performClick('multiUpload'); return false;">
                    <i class="fa fa-cloud-upload"></i>
                </a>
                <button type="submit" class="btn bt-sm btn-info" name="submitHandler" id="submitHandler">Enviar</button>
            </span>
        </form>
    </li>
    <li class="foto" style="position: relative" ref="<? echo $FotCodigo ?>">
        <a href="modal/gal.mod.php?act=del&tbl=fot&cod=<? echo $FotCodigo ?>" data-toggle="modal" data-target="#modal" class="btn btn-default btn-xs btn-del-foto" data-placement="left" title="Excluir foto" data-original-title=""><i class="fa fa-times"></i></a>
        <a href="modal/fot.mod.php?cod=<? echo $FotCodigo ?>" data-toggle="modal" data-target="#modal"><span class="mailbox-attachment-icon has-img"><img src="http://wigreja.loc/sites_igrejas/img_galerias/p/<? echo $fb['pequena']; ?>" alt="<? $AlbTitulo ?>"></span></a>
    </li>
</ul>

<script type="text/javascript" src="js/multiupload.js"></script>
<script type="text/javascript">
function performClick(elemId) {
   var elem = document.getElementById(elemId);
   if(elem && document.createEvent) {
	  var evt = document.createEvent("MouseEvents");
	  evt.initEvent("click", true, false);
	  elem.dispatchEvent(evt);
   }
}
var ref = document.getElementById("referencia").value;
var config = {
	// Valid file formats
	support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif", 
	form: "demoFiler", // Form ID
	dragArea: "dragAndDropFiles", // Upload Area ID
	uploadUrl: "upload.php?alb="+ref // Server side file url
}
//Initiate file uploader.
$(document).ready(function() {
	initMultiUploader(config);
});

</script>

Já tentei fazer o submit do form com comando onChange no input, mas ele redireciona para a home do site.

Também tentei fazer ele simular o evento click no botão #submitHandler (submit), mas ele não faz nada.

Qual seria a solução pra isso?