Subir imagenes con ajax

[jandrogdz]

Buenas foro.

Estoy tratando de subir imagenes con ajax a mi server.
Esto al parecer lo he logrado con un script que encontre, pero ahora mi problema es como hacer para que la pagina no se recargue.

Si en el script añado el evento change en addEventListener la pagina no se recarga pero solo se enviaria la imagen y necesito que se mande todo el formulario al hacer click en el submit sin que se recargue la pagina.

Código Javascript:

(function () {
    var input = document.getElementById("images"), 
        formdata = false;
 
    if (window.FormData) {
        formdata = new FormData();
        var btnLoad = document.getElementById("btn").style.display = "block";
    }
    
    btnLoad.addEventListener("click", function (evt) {
        document.getElementById("response").innerHTML = "Uploading . . ."
        var i = 0, len = this.files.length, img, reader, file;
    
        for ( ; i < len; i++ ) {
            file = this.files[i];
    
            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                        showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images", file);
                }
            }   
        }
        
        if (formdata) {
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    document.getElementById("response").innerHTML = res; 
                }
            });
        }
    }, false);
}());
 

Tengo poco utilizando ajax. Espero me puedan ayudar.

[maycolalvarez]

tendrías que serializar todo el form con jQuery y evitar el submit normal, sea devolviendo false en el evento onsubmit del form, o usando preventDefault()

ten en cuenta que estás usando FileApi y no todos lo navegadores lo soportan

[jandrogdz]

gracias por contestar y como hago eso de serealizar el form no tengo tanta experiencia en ajax.

Me podrias explicar como hacer eso.

[maycolalvarez]

consulta la documentación de jQuery.serialize(), es realmente simple, la idea sería enviar todo el form junto con el binario de la imagen, aunque no se si se pueda con jquery