Enviar formularios con ficheros por Ajax

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

ajax_jquery_ficherosEnviar el contenido de campos de un formulario al servidor (todos los campos o algunos de ellos) es una operación conceptualmente muy simple. Hasta hace muy pocos años, la forma de hacerlo era directamente desde HTML, con o sin validación previa por JavaScript. El formulario se enviaba al servidor, la página que recibia los datos los procesaba y se cargaba en el navegador, mostrando el resultado de la recepción y o el procesado. Si queríamos que no hubiera un cambio de página, se recurría al viejo truco de crear un iframe de ancho y alto 0 en la página dónde estaba el formulario, y se ponía el nombre de dicho iframe como atributo target, de modo que el script encargado de procesar los datos se cargaba en el iframe. Esta técnica presentaba varios inconvenientes y requería más programación y dominio del DOM de Javascript pero, en aquellos días, era lo más refinado que había. Después llegó AJAX y revolucionó la comuniciación asíncrona con el servidor. La página del formulario ya podía enviar los datos al script receptor mediante un fragmento de JavaScript que se ejecutaba en el cliente, y recibir y procesar una respuesta del servidor, de una forma cómoda y eficiente. jQuery supuso un salto cuántico en la forma de usar AJAX. Fiel a la filosofía de “escribe menos, haz más”, enviar un formulario mediante AJAX con JQuery es relativamente fácil. Te supongo familiarizado con esta técnica, pero si eres nuevo, en este blog publicaremos artículos para aprender a usar todos los recursos de jQuery y AJAX.

El objetivo de este artículo es aclarar el tema de envió de formularios que incluyen campos de ficheros, mediante AJAX y jQuery.

LA PARTE FÁCIL

La parte fácil que estamos acostumbrados a usar a diario es el envío de formularios sin ficheros, sólo con datos. Esto podemos hacerlo de varios modos. Por ejemplo, en el siguiente código vemos cómo enviamos los datos mediante post. en envioPorPost.htm:

El script que recibe los datos es muy simple. Lo único que haces es mostrar el contenido de la matriz $_POST de PHP, para que el AJAX de nuestra página lo vuelque a la consola del navegador. Lo único que pretendemos con esto es que puedas comprobar que los datos se han enviado. Aquí ves recibir.php:

Cuando ejecutas envioPorPost.htm, rellenas los campos y envias el formulario, en la consola de tu navegador ves el resultado, tal cómo se muestra en la siguiente imagen:

En la consola vemos los campos enviados.

En la consola vemos los campos enviados.

NOTA. Para abrir la consola del navegador, pulsa CTRL-MAYS-J si usas Google Chrome, Opera o Mozilla Firefox. Si usas Internet Explorer (que allá cada uno con sus manías), pulsa F12.

Si queremos hacer el envio por get, en lugar de post, nos basta con sustituir la línea 15 de la página del formulario. Donde pone: $.post( pondremos $.get( y listo. Por supuesto, en el script recibir.php deberemos sustituir var_dump($_POST); por var_dump($_GET);.

AHORA CON FICHERO

Ahora sí que sí. Vamos a enviar un formulario con un fichero al servidor, mediante AJAX y jQuery. El código con el formulario se llama envioConFichero.htm:

El script recibir.php tiene ahora una línea más. Debe mostrar lo que haya recibido por $_POST, y también lo que haya recibido por $_FILES, para que podamos comprobar que se han enviado tanto los datos como el archivo.

Cuando ejecutamos, llenamos el formulario y lo enviamos, vemos un resultado cómo el de la siguiente imagen:

En la consola vemos que, tanto los datos cómo el fichero han llegado correctamente.

En la consola vemos que, tanto los datos cómo el fichero han llegado correctamente.

Cómo ves, es muy fácil. El código XHTML te lo he dejado con muchos comentarios para que te sea fácil de seguir, y de implementar en tus scripts.

Si tienes cualquier duda o comentario no dudes en exponerlo.

 

     

3 comentarios:

  1. Pingback: Ajax con jQuery (y III) » Recursos para programadores

  2. Este post fue de gran ayuda.
    Estuve buscando documentancion al respecto y no encontraba uno tan preciso.
    Muchas gracias 🙂

  3. Very good artiⅽle. I absolutely appreciate this site.
    Keep it up!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *