Enviar formulario y foto con ajax

[madman_18]

Buenos días a todos!

Tengo un problema a la hora de gestionar el formulario: lo envío con ajax de la siguiente forma.

Código Javascript:

$.ajax({
       type:'post',
       url:'validarEnviar.php',
       data: $('#frmTrabaja').serialize(),
       success: function(data){
                $('html, body').animate({scrollTop:0}, 'fast',function(){
                    $('#sacaResultadoMail').html(data);
                    $('.resultado-email').show('fast');
                    /*$('#frmTrabaja').each(function(){
                                 this.reset();
                    });
                    // Dejamos x tiempo el bloque abierto: si no pulsan en cerrar lo ocultamos directamente
                    /*setTimeout(function(){
                         $('.resultado-email').hide(1000);
                    },10000);*/    
                });
       },
       error: function(){
           $('#sacaerror').html("<img src='imagenes/form-advertencia.png' align='middle'/><label>Ocurri&oacute; un error procesando su solicitud, por favor int&eacute;ntalo m&aacute;s tarde.</label>");
           $('#sacaerror').show("clip","fast");
       }
    });
 

Pero la cosa está en que, a la vez, junto al formulario, tengo que dar opción a que se envíe una foto si han rellenado el campo file del form.

¿Como puedo hacer para mandar ambos, tanto el form como la foto?

Gracias de antemano!

[maycolalvarez]

recuerda que Javascritpt no tiene acceso al IO, por lo que AJAX no puede leer las imágenes locales, sin embargo, con HTML5 tenemos una serie de mejoras para suplir dicha necesidad:

Usar HTML5 File API
Usar XmlHttpRequest Nivel 2

también tienes la arcaica manera de enviar el post mediante un iframe oculto, que en esencia es AJAX sin tanto esfuerzo

y por supuesto hay plugins para jQuery que implementan dichas funcionalidades, unos con un adobe flash oculto, otros menejan el HTML5 FileApi.