Enviar 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- IMPORTAMOS jQuery y Bootstrap. En realidad, bootstrap aquí no lo necesitamos para nada, pero nos permite un poco de presencia. Por hacer bonito, vamos. --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script language='javascript'> $(function(){ $('#envio').on('click', function (e){ e.preventDefault(); // Evitamos que salte el enlace. $.post( 'recibir.php', // Script de destino { // Pares nombre valor que se envían. 'dato_nombre':$('#campoNombre').prop('value'), 'dato_correo':$('#campoCorreo').prop('value') }, function (resultado){ // Función callback. Recibe lo que manda "recibir.php" y lo vuelca en consola. console.log(resultado); } ); }); }); </script> </head> <body> <div class="container-fluid"> <div class="header alert alert-info">FORMULARIO CON AJAX POR jQuery</div> </div> <!-- El HTML son solo unos campos de formulario. Ni siquiera necesitamos, para este ejemplo, incluir esos campos en el contexto de un formulario, por lo que no hemos puesto las etiquetas <form></form> --> <div class="container"> <div class="row"> <label for="campoNombre">Nombre:<br /> <input type="text" class="form-control" id="campoNombre" /> </label> </div> <div class="row"> <label for="campoCorreo">Correo:<br /> <input type="email" class="form-control" id="campoCorreo" /> </label> </div> <br /> <div class="row"> <a href='#' id='envio' class='btn btn-primary btn-lg'>Enviar</a> </div> </div> </body> </html> |
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:
|
1 2 3 |
<?php var_dump ($_POST); ?> |
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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- IMPORTAMOS jQuery y Bootstrap. En realidad, bootstrap aquí no lo necesitamos para nada, pero nos permite un poco de presencia. Por hacer bonito, vamos. --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script language='javascript'> $(function(){ $('#envio').on('click', function (e){ e.preventDefault(); // Evitamos que salte el enlace. /* Creamos un nuevo objeto FormData. Este sustituye al atributo enctype = "multipart/form-data" que, tradicionalmente, se incluía en los formularios (y que aún se incluye, cuando son enviados desde HTML. */ var paqueteDeDatos = new FormData(); /* Todos los campos deben ser añadidos al objeto FormData. Para ello usamos el método append. Los argumentos son el nombre con el que se mandará el dato al script que lo reciba, y el valor del dato. Presta especial atención a la forma en que agregamos el contenido del campo de fichero, con el nombre 'archivo'. */ paqueteDeDatos.append('archivo', $('#campoFichero')[0].files[0]); paqueteDeDatos.append('nombre', $('#campoNombre').prop('value')); paqueteDeDatos.append('correo', $('#campoCorreo').prop('value')); var destino = "recibir.php"; // El script que va a recibir los campos de formulario. /* Se envia el paquete de datos por ajax. */ $.ajax({ url: destino, type: 'POST', // Siempre que se envíen ficheros, por POST, no por GET. contentType: false, data: paqueteDeDatos, // Al atributo data se le asigna el objeto FormData. processData: false, cache: false, success: function(resultado){ // En caso de que todo salga bien. console.log(resultado); }, error: function (){ // Si hay algún error. alert("Algo ha fallado."); } }); }); }); </script> </head> <body> <div class="container-fluid"> <div class="header alert alert-info">FORMULARIO CON AJAX POR jQuery</div> </div> <!-- El HTML son solo unos campos de formulario. Ni siquiera necesitamos, para este ejemplo, incluir esos campos en el contexto de un formulario, por lo que no hemos puesto las etiquetas <form></form> --> <div class="container"> <div class="row"> <label for="campoNombre">Nombre:<br /> <input type="text" class="form-control" id="campoNombre" /> </label> </div> <div class="row"> <label for="campoCorreo">Correo:<br /> <input type="email" class="form-control" id="campoCorreo" /> </label> </div> <div class="row"> <label for="campoFichero">Fichero:<br /> <input type="file" class="form-control" id="campoFichero" /> </label> </div> <br /> <div class="row"> <a href='#' id='envio' class='btn btn-primary btn-lg'>Enviar</a> </div> </div> </body> </html> |
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.
|
1 2 3 4 |
<?php var_dump ($_POST); var_dump ($_FILES); ?> |
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.
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.
Pingback: Ajax con jQuery (y III) » Recursos para programadores
Este post fue de gran ayuda.
Estuve buscando documentancion al respecto y no encontraba uno tan preciso.
Muchas gracias 🙂
Verｙ good artiⅽle. I absolutely appreciate this site.
Keep it up!