Subir una imagen al servidor con ajax

[turm]

Buenos días comunidad.
He estado trabajando con ajax y ahora se me presenta el siguiente problema.
Cuando intento subir una imagen con ajax al documento .php que recibe los datos no le llega la imagen. Busque ejemplos y los patrones que encontré en estos en que suben las imágenes con evento submit, pero cuando es así en mi código no se sube ningún dato. así que lo probé con el evento click, y tengo esto de aquí solo que, si ya mis datos están empaquetado por data:$("#form_ej").serialize(), no entiendo porque no se sube la imagen
aquí esta mi ajax

Código Javascript:

$(function(){
          $(document).on("click","#btn-ej",function(){
                    var url="practicas/process/crearejercicio.php";
                    
                    $.ajax({
                        type:"POST",
                        url:url,
                        data:$("#form_ej").serialize(),
                        success:function(data){
                            $("#mens_ejer").html(data);
                        }
 
                    });
 
                    return false;
                });
            });
 

Y este es una muestra de como esta mi html del formulario

Código HTML:

<form id="form_ej" method="post" enctype="multipart/form-data">
        <!--Muchos datos-->
               <div class="col-sm-5 col-sm-offset-4">
                <input  type="file" name='image'>
        </div>
                <button type='button' id='btn-ej' value='enviar' class='btn btn-success btn-sm'>Crear ejercicio</button>
<div id="mens_ejer"></div>
 
</form>
 

De antemano gracias por su atencion

[rodocoyote15]

No puedes enviar una imagen como data por ajax, al menos lo que sé.

Necesitas añadir estas lineas a tu script

Código Javascript:

var formData = new FormData($("#form_ej")[0]);
 

En la petición ajax quedaría algo así

Código Javascript:

$.ajax({
                        type:"POST",
                        url: url,
                        data: formData,
                        success:function(data){
                            $("#mens_ejer").html(data);
                        }
 
                    });
 

Y si necesitas enviar más datos en la misma ajax, tendrías que hacerlo por get, añadiendo a url algo así por ejemplo

Código Javascript:

url: url+'?campo1='+ campo 1,
 

Entendiendose por "campo 1" algun input extra

[turm]

que crees que no funciono el codigo :/

[Zenok]

Como te han comentado, necesitas utilizar el formdata

Prueba con esto

Código Javascript:

$(document).on('click', '#send', function(e)
                {
                    var data = new FormData();
                    var input = $('#photos');
                    //Append files infos
                    $.each(input[0].files, function(i, file) {
                        data.append('file-'+i, file);
                    });
                    
                     $.ajax({  
                        url: "test.php",  
                        type: "POST",  
                        data: data,  
                        cache: false,
                        processData: false,  
                        contentType: false, 
                        context: this,
                        success: function (msg) {
                             alert(msg);
                         }
                     });
                    e.preventDefault();
                });
            });
 

Código HTML:

<form method="post" action="" id="form-upload" enctype="multipart/form-data">
            <input type="file" id="photos" name="photos[]" multiple/>
            <input type="submit" id="send"/>
        </form>
 

[rodocoyote15]

Cierto, me he olvidado del processData y el contentType, prueba con eso ojalá si funciona, saludos :D