Subir archivos usando ajax jquery
Categories: AJAX, PHP - Tags: AJAX, formulario, PHPNo 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.
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
1 2 3 4 5 6 7 8 9 10 | #upload_button { width:120px; height:35px; text-align:center; background-image:url(boton.png); color:#CCCCCC; font-weight:bold; padding-top:15px; margin:auto; } |
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.
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 | <script language="javascript" src="js/jquery-1.3.1.min.js"></script> <script language="javascript" src="js/AjaxUpload.2.0.min.js"></script> <script language="javascript"> $(document).ready(function(){ var button = $('#upload_button'), interval; new AjaxUpload('#upload_button', { action: 'upload.php', onSubmit : function(file , ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // extensiones permitidas alert('Error: Solo se permiten imagenes'); // cancela upload return false; } else { Cambio el texto del boton y lo deshabilito button.text('Uploading'); this.disable(); } }, onComplete: function(file, response){ button.text('Upload'); // habilito upload button this.enable(); // Agrega archivo a la lista $('#lista').appendTo('.files').text(file); } }); }); </script> |
Upload.php
Veamos ahora que ocurre con el archivo php que subirá la imagen al servidor y que podemos cambiar según nuestras necesidades
1 2 3 4 5 6 7 8 9 10 11 12 | <?php // defino la carpeta para subir $uploaddir = 'uploads/'; // defino el nombre del archivo $uploadfile = $uploaddir . basename($_FILES['userfile']['name']); // Lo mueve a la carpeta elegida if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { echo "success"; } else { echo "error"; } ?> |
//////// Actualización ///////////
He publicado un nuevo post respondiendo algunas dudas e implementando el ajax uploader con la última versión, pueden verlo AQUI
Hola
Para eso necesitas ver este tutorial actualizado http://www.miguelmanchego.com/2010/jquery-subir-archivos-usando-ajax/ Allí hay un parámetro “auto” que determina que al seleccionar el archivo no lo suba inmediatamente. Más información en la documentación del plugin http://www.uploadify.com/documentation/
Eso lo sube automaticamten ahora si quiesiera que esperara una aprobacion
Hay un parametro “auto” que determina eso, mas claro en la versión actualizada http://www.miguelmanchego.com/2010/jquery-subir-archivos-usando-ajax/
Hola!!
No funciona ni en Safari 5.0.3 ni en Chrome 8.0.552.237 sobre MAC.
¿Existe alguna actulización de este plugin para que funcione en estos navegadores?
Muchas gracias y un saludo.
[...] Hola Fernando, Hay varios plugins de Jquery que pueden, mediante AJAX , por ejemplo el que puedes apreciar en el este link. [...]
Y COMO LE HAGO PARA GUARAR EL NOMBRE EN UN BASE DE DATOS
Hola…
es un buen ejemplo, pero si quiero limitar el tamaño de la imagen COMO LO PUEDO VALIDAR?
No soy muy bueno en esto y agradezco tu ayuda
hola.
gracias por tus aportes.
quisiera saber como puedo validar el tamaño del archivo antes de enviar la pagina..
agradezco cualquier ayuda
oye compa no sabes como hacerlo sin el action del form, hay una forma de hacer, gracias por la atencion
no sube el archivo a la carpeta.. ya busque por todos lados y al parecer todo esta bien… que otro problema podria ser??
excelente este tuto, fácil de entender y código muy legible sin tantos vueltas. ha sido de gran ayuda.
un saludo cordial.
Necesito saber el alto y el ancho de la imagen ante de subirla…. Si alguien me ayuda se lo agradeceria
para agregar la imagen despues de subir la imagen hay que agregar lo siguiente:
$(‘#lista’).appendTo(‘.files’).html(“”);
y en el codigo en el body donde dice hay que cambiarlo por
mi pregunta es como se puede hacer thumbnail para mostrar las imagenes?