No es posible subir archivos al servidor usando ajax debido a un problema de seguridad, sin embargo es posible emularlo usando un iframe y de esa forma hacer un upload sin tener que recargar la página web, en este tutorial voy a explicar como hacer eso usando jquery.
¿Por qué usar este plugin?
Seguro habras visto en Internet varias otras formas pero este nos da varias ventajas:
- Permite limitar la subida de archivos a algunas extensiones
- No necesita recargar la página web
- Facil de implementar
- Puedes controlar los eventos mientras se sube y despues de subir el archivo
HTML para el uploader
El plugin jquery se encarga casi de todo asi que lo único que requerimos es un div que al darle click permita subir un archivo.
[cc lang=»html»]
[/cc]
CSS para el uploader
Ya cada uno se encarga de ponerle el formato que uno desee al boton, yo usaré uno basico para darle algo de forma
[cc lang=»css»]
#upload_button {
width:120px;
height:35px;
text-align:center;
background-image:url(boton.png);
color:#CCCCCC;
font-weight:bold;
padding-top:15px;
margin:auto;
}
[/cc]
AJAX
Primero hay que incluir la libreria jquery, luego el plugin y finalmente nuestro código para manejar el uploader, no todo el código que publico es necesario ya que puedes obviar la parte de la comprobación de extensión al igual que el agregar el nombre del archivo a la lista luego de completar la subida del archivo.
[cc lang=»javascript»]
[/cc]
Upload.php
Veamos ahora que ocurre con el archivo php que subirá la imagen al servidor y que podemos cambiar según nuestras necesidades
[cc lang=»php»]
[/cc]
//////// Actualización ///////////
He publicado un nuevo post respondiendo algunas dudas e implementando el ajax uploader con la última versión, pueden verlo AQUI
