Cómo upload files a través de Jquery / AJAX

Actualmente estoy PUBLICANDO mi formulario a través de AJAX con el siguiente código:

$(document).ready(function(){ $("form#createForm").submit(function() { // loginForm is submitted $("form#createForm input#createForm_submit").attr('disabled','disabled'); tinyMCE.triggerSave(); $.ajax({ type: "POST", dataType: "json", url: "perform", // URL of the Perl script data: $("#createForm").serialize(), // script call was successful // data contains the JSON values returned by the Perl script success: function(data){ $('div.form-group').each(function(){ $(this).removeClass('has-error'); }); if (data.error) { // script returned error var myList = $('ul.msg-list').empty(); $.each(data.msg, function(key,item) { $("div."+key).addClass('has-error'); $('<li>').text(item.errtxt).appendTo(myList); }); $('div#create_createresult').html('some error').html(myList); $('div#create_createresult').addClass("text-danger"); $("form#createForm input#createForm_submit").removeAttr('disabled'); } // if else { // login was successful //$('form#login_loginform').hide(); $('div#create_createresult').text(data.msg); $('div#create_createresult').addClass("success"); } //else } // success }); // ajax $('div#login_loginresult').fadeIn(); return false; }); }); 

Ahora quiero agregar la posibilidad de upload una image de la misma forma y simplemente implementarla en esta JQUERY y en la misma secuencia de commands del lado del server. Mi único problema es que no sé cómo hacerlo … He probado lo anterior y me parece que no pasa la variable $ _FILES a mi script del lado del server.

¿Alguien puede guiarme en cualquier dirección, lo que necesito hacer, para agregar la posibilidad de carga de imágenes con este script?

trata de usar esto

 // grab your file object from a file input $('#fileInput').change(function () { sendFile(this.files[0]); }); // can also be from a drag-from-desktop drop $('dropZone')[0].ondrop = function (e) { e.preventDefault(); sendFile(e.dataTransfer.files[0]); }; function sendFile(file) { $.ajax({ type: 'post', url: '/targeturl?name=' + file.name, data: file, success: function () { // do something }, xhrFields: { // add listener to XMLHTTPRequest object directly for progress (jquery doesn't have this yet) onprogress: function (progress) { // calculate upload progress var percentage = Math.floor((progress.total / progress.totalSize) * 100); // log upload progress to console console.log('progress', percentage); if (percentage === 100) { console.log('DONE!'); } } }, processData: false, contentType: file.type }); }