Question

Con jQuery para enviar formularios sencillos basta con el siguiente código:

$(document).ready(function() {  
                 $("body").on("submit", "form", function( event ) {
            $(this).replaceWith('Pensando...');

            event.preventDefault();             

            var type = "POST";  
            var url = $(this, "form").prop("action");   
            var cadena = $(this, "form").serialize();   
            alert("Cadena: " + cadena);

            $.ajax({
                type: type,
                url: url,
                data: cadena,                           
                success: function(data) {
                    if (data) {
                        //alert(data);
                        $(".section").html(data);
                        return;
                    }                   
                    else {
                        //alert(data);
                        alert("Data no tiene valor");
                    }           
                }
            });
        });
});

Pero cuando el formulario contiene un archivo o imagen, esto no sirve, buscando por Internet encontré el uso de FormData, para el envió de archivos mediante AJAX, lo intento aplicar, pero no funciona:

$(document).ready(function() {  
                $("body").on("submit", "form", function( event ) {
            $(this).replaceWith('Pensando...');

            event.preventDefault();     

            var url = $(this, "form").prop("action");     
            var fd = new FormData($(this, "form"));
            var tipo = "POST";

            alert(JSON.stringify(fd));

            $.ajax({
                url: url,           
                data:   fd, 
                type: tipo, 

                success: function(data) {
                    if (data) {
                        $(".section").html(data);
                        return;
                    }                   
                    else {
                        alert("Data no tiene valor");
                    }           
                }
            });
        }); 
});

El alert que debería mostrar la cadena, aparece vacía.
.section no es más que una clase de <section> en el index, donde se cargar el formulario y donde debería redirigirse el resultado.

Comments

Mirando la consola de Chrome el error que me da es el siguiente:

jquery.min.js:4 Uncaught TypeError: Illegal invocation

y lo indica sobre la linea del ajax ¿Que estoy haciendo mal?

Answer 1

Bueno lo consegui, pongo el resultado

        if (window.File && window.FileReader && window.FileList && window.Blob) {
            //Great success! All the File APIs are supported.
        } else {
            alert('Si esta viendo esto por favor dimelo.');
        }

        $("body").on("change", "#files", function(event) {
            var files = event.target.files[0];

            /*if (!files.type.match('image.*')) {
                continue;
        }*/

        var reader = new FileReader();

            reader.onload = (function(theFile) {
            return function(e) {
              $(datos).html('<img class="thumb" src="' + e.target.result + '" title="' + escape(theFile.name) + '"/>');
            };
            })(files);

            reader.readAsDataURL(files);
        });

        $("body").on("submit", "form", function(event) {
                event.stopPropagation();
            event.preventDefault();   

                var type = "POST";  
                var url = $(this, "form").prop("action");       

                if(event.target.files) {    
               var file = event.target.files;   
                var elementos = $(this, "form")[0].elements;

                    var data = new FormData();              

                    for( var i = 0; i < elementos.length; i++ ) {
                        element = elementos[i];
                        data.append(element.name,element.value);
                    }               

                    var file_data = $(file).prop("files")[0];                             
                data.append("files", file_data);                    

                    var cache = false;
                    var contentType = false;
                    var processData = false;
            }
            else {
                var data = $(this, "form").serialize(); 
            }   

            $.ajax({          
                url: url,
               data: data,
               type: type, 
               cache: cache,
                contentType: contentType,
                    processData: processData

            })
            .done(function(data) {                  
                $(".section").html(data);
            }); 
        }); 

Solo un pequeño detalle

if (!files.type.match('image.*')) {
                continue;
        }

Esta parte del texto es para que solo acepte imágenes, pero no funciona, pero bueno es algo secundario que ya puedo mirar con más calma.

Saludos

Answer 2

hola @bichomen puede que a tu formulario en la carga en el codigo de AJAX le
falte estas lineas:

cache: false,
contentType: false,
processData: false,

Answer 3

Hola @bichomen,

para enviar un archivo con AJAX, hay que previamente procesar los INPUT de tipo FILE, y también cambiar el tipo de formulario para que sea multipart-form-data.

El HTML es siempre subyacente, así que hay que respetar sus reglas de funcionamiento.

Para procesar el archivo y poderlo cargar como dato:

// Variable para almacenar los archivos
var files;
// Manejador del evento onChange
$('input[type=file]').on('change', prepareUpload);
// Procesaro el archivo para cargarlo a la variable
function prepareUpload(event) {
  files = event.target.files;
}

Luego ajustar el envío para que el tipo de formulario pueda manejar el arvhivo:

// Crea un objeto formdata y agrega los archivos
    var data = new FormData();
    $.each(files, function(key, value) {
        data.append(key, value);
    });

    $.ajax({
        url: 'submit.php?files',
        type: 'POST',
        data: data,
        cache: false, // Para evitar la cache
        dataType: 'json',
        processData: false, // No procesar los archivos
        contentType: false, // multipart-form-data
        success: function(data, textStatus, jqXHR)
        {
        ...

En este enlace tenés un buen tutorial que explica todo paso a paso.

Saludos cordiales!