Cómo enviar un archivo usando Ajax
Patxi Echarte,
31. Mar, 2010,
6 Comentarios
JavaScript, Otros diseño web
El uso de Ajax ha hecho que las aplicaciones web sean mucho más ricas de lo que eran antiguamente, gracias a que permiten al usuario interactuar con la página sin necesidad de recargar toda la página. Esta interacción se realiza habitualmente mediante el uso de XMLHttpRequest. Sin embargo esta técnica no permite el envío de archivos al servidor, por lo que es habitual que en estos casos se siga produciendo la recarga de la página. Es posible resolver este problema utilizando flash, como hace por ejemplo FancyUpload, pero también es posible simular el funcionamiento de Ajax tal como se hacía antes de que se generalizase el uso de XMLHttpRequest, mediante la utilización de un iframe oculto.
El uso de iframes ocultos fue una de las primera técnicas que se utilizaron para tratar de dar cierta interactividad a las páginas web. Si conoces Ajax su funcionamiento es muy sencillo. Se basa en tener un iframe oculto al que se envían las peticiones web y en el que se cargan los resultados de las llamadas, junto normalmente a una llamada a una función de la página principal que hace la captura de estos datos. Vamos a ver a continuación cómo aplicar esta técnica para enviar un archivo al servidor sin cambiar de página.
El siguiente fragmento de html muestra un formulario que solicita al usuario un archivo a enviar al servidor, e incluye también la definición de un iframe oculto.
<form method="post" action="enviar.php" target="upload_target" enctype="multipart/form-data"> Imagen <input name="photo" type="file" /> <input type="submit" value="Enviar" /> </form> <iframe id="upload_target" name="upload_target" src="" style="width:0px;height:0px;border-width:0px;" class="display:none"></iframe> <script type="text/javascript"> function uploadDone(msg){ alert(msg); } </script> |
El formulario indica en su atributo target que el resultado hay que cargarlo en el elemento upload_target, correspondiente al iframe oculto. De esta forma conseguimos que cuando el usuario envíe el formulario no se produzca un cambio de página. Pero, ¿cómo se entera la página de que el archivo ha sido recibido?. Para ello se incluye una función Javascript a la que habrá que llamar desde el iframe cuando el resultado esté listo. En este caso simplemente se muestra una alerta, pero normalmente habría que mostrar información del elemento enviado, como una miniatura si se ha enviado una imagen.
Cuando el usuario envíe un archivo, en la parte del servidor un programa (en este caso un PHP) debe recibir el archivo y procesarlo. Como resultado debe generar el html que se incluirá en el iframe y que será el encargado de llamar a la función uploadDone de la página principal. El siguiente fragmento de html muestra un ejemplo en el que se informa que el archivo ha sido enviado correctamente.
<script type="text/javascript"> function init() { if(top.uploadDone) top.uploadDone("Archivo enviado correctamente"); } window.onload=init; </script> |
no entendiendo tu explicación, donde dices que metes codigo ajax, por otro lado que tecnologia usas como servidor para subir tus archivos, esta muy corto tu articulo, si es posible que lo complementes más porque es información que no detalla mucho.
hola mario, lee detenidamente el artículo. El el primer párrafo se explica la diferencia con el funcionamiento habitual de ajax basado en XMLHttpRequest y el motivo. En el último párrafo indico que la parte servidora está en PHP, aunque podrías utilizar cualquier otro lenguaje, ya que el envío y la gestión de la respuesta se hace con JS en el navegador del usuario.
gracias patron de patrones, simplecito y facil de implementar, sin embargo tengo que decir que hay un error leve, el cual es el siguiente:
es que cambiar type=’submit’
FUNCIONA PERFECTO!!
TE AGREDESCO MUCHO
Gracias ivanchinho por el aporte, ya lo he corregido.
¡Muchas gracias canijo!
osea que el ultimo codigo que dices que va en el archivo del lado del servidor! pordría ir en un echo? o separado dentro del mismo php com script?