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.
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"; } ?> |
hola. como puedo hacer para que me devuelva cualquiier respuesta, y no solo el nombre de la imagen
Hola, simplemente modifica la linea 25 que es donde muestra el nombre del archivo
$(‘#lista’).appendTo(‘.files’).text(file);
y le pones algo como:
$(‘#lista’).appendTo(‘.files’).”Este es mi texto personalizado”;
Hola!
Esta librería mola…Pero no permite hacer lo que REALMENTE mola, que es hacer un uploader sin necesidad de usar otra cosa que ajax y php (es decir, no usar un truquito del estilo de insertar un controlillo de flash, que hace muy complicado mantener la sesión de usuario y demás).
La solución es el hook de las extensiones de apache para php que podéis encontrar aquí:
http://pecl.php.net/package/uploadprogress
Yo me recompilé php con este truquito y retoqué, además, el código del array que le devuelve a php cuando se está realizando la subida para hacer comprobaciones de formato “on the fly” en el archivo que se está subiendo.
El resultado es muy muy cool! XD.
PD: Si alguien lo necesita, tengo el paquete disponible para debian en .deb
Un saludo!
muy útil
muchas gracias por compartir.
Gracias por el aporte fue de mucha utilidad para un proyecto que estoy realizando
Se te agradece bastante
funciona correctamente
Hola.. disculpa.. eh intentado pasar tu codigo a una funcion.. esque estoy utilizando xajax, y cuando cargo la pagina me dice de un objeto null.. no se si podrias pasarme el codigo modificado pero en una funcion java.. y el boton que sea algo simple un <input type=\\
Hola, pasar este script a uno con XAJAX o solo javascript resulta muy complicado, revisa si jquery con XAJAX no estan peleandose y de allí el error
gracias… pero ya logre kme funcionara… y gracias por el aporte nomas k tengo k presionar dos veces el boton.. no se aun xk pero lo arreglare.. pero gracais de nuevo por estar tan atento
Hola! te agradezco mucho el post, justamente esto buscaba… como no todos los blog dieran respuestas concretas…
Saludos
Hola, gracias por el aporte, muy bueno.
Si me puedes ayudar porfavor, quiciera modificar la propiedad action: ‘upload.php’ por cualquier página que yo quiera pero dinamicamente al yo pulsar un boton o escribir en un cuadro de texto etc., si de favor me orientas por q no se mucho de jQuery.
Gracias. Espero repuesta.
La respuesta es un poquito complicada si no se conoce bien el javascript. Para lograr eso debes colocar ‘upload.php’ en una variable para que puedas indicarle que tome el valor del cuadro de texto por ejemplo $(“#micampo”).val();
Correccion al comentario No. 2
debe decir
$(\’#lista\’).appendTo(\’.files\’).text(\’Este es mi texto personalizado\’);
Ademas si queremos ver la imagen inmediatamente despues de subirla seria:
$(\’#lista\’).appendTo(\’.files\’).html(\”);
Correccion al comentario No. 2
debe decir
…appendTo(‘.files’).text(‘Este es mi texto personalizado’);
Miguel manchego tu pagina es excelente Pero debo decir que tenia la intension de comentar una correcion de tu codigo pero no se puede hacer nada
Espero lo arregles porque estas evitando que se publiquen comentarios enriquecedores.
Para evitar el spam la auto aprobacion de comentarios esta desactivada hasta que apruebe al menos un comentario, por favor no repitas tus comentarios hasta que se apruebe al menos uno
Hola,
Me ha sido de mucha utilidad este post.
Necesito ayuda para pasar un valor desde index al archivo php que procesa el upload de la imagen.
Esto suelo hacerlo con un input tipo ‘hidden’.
Pero como aquí no hay estoy perdido.
Solo eso: pasar un valor ($miValor) desde index (la página donde está el botón para subir) a upload.php
Hola, para ese tipo de cosas mejor usa este otro a este puedes agregarle los campos hidden o incluso un formulario completo tal y como se haría con un formulario común
Hola,
He visto ese otro que me dices, pero no sabría como hacerlo funcionar para que emule ajax usando un iframe como lo hace el codigo de este post. Como solo necesitaba pasar un solo valor, por el momento lo he arreglado con una var de tipo $_SESSION.
Gracias
En la pagina del autor dice como basta agregar una linea
action: ‘upload.php’,
// File upload name
name: ‘userfile’,
// Additional data to send
data: {
example_key1 : ‘example_value’,
example_key2 : ‘example_value2′
Me gustaria saber como mostrar un preview de una imagen subida por este metodo, alguno de uds tiene una idea de como hacerlo?
Hola! Me parece interesante tu publicacion, sin embargo use tus archivos para probarlo y parece que no esta funcionando… no sube la foto al folder “uploads”. A alguien si le sirvio? Que podria ser lo que pasa?
Gracias
Hola, esta perfecto el codigo, pero tengo una duda, como deberia modificar el codigo para que a parte de la subida del archivo, inserte un registro en una tabla de una base de datos, para asi guardarme la ruta del archivo? He intentado hacerlo poniendo mi query en el upload.php pero no lo inserta
Muchas gracias
Con upload.php debería bastar, usando firebug revisa que error esta dando o si tu consulta sql es correcta.
hola me baje y probe el script, debo decir que funciona de maravillas en firefox y en Chrome, pero no en iexplorer y opera
en iexplorer sale el siguiente error:
“llamada inesperada a un metodo o a un acceso de propiedad
jquery-1.3.1.min.js linea 12
codigo:8 caracter 2275″
¿por que ocurre esto?
QUe raro que te de un error en el propio jquery, prueba bajando una versión más actual en jquery.com si aún no funciona haz la prueba usando no la versión minified (.min) sino la completa
Hola,
muchas gracias por el tutorial, me ha servido de mucha ayuda.
Tengo un pequeño problema, lo quiero modificar para que me devuelva la url del archivo subido, es decir, si subo una imagen con el nombre, prueba.jpg, que al subir el archivo me ponga http://www.prueba.com/upload/prueba.jpg pero el javascript no lo domino y no doy como con la forma de como modificarlo, me puedes orientar?, muchas gracias.
Otra problema, y es que me pasa lo mismo que omicron, en IE no funciona, pero al poner la ultima versión de jquery funciona correctamente pero no muestra el mensaje al subir la imagen, no dice nada. Que raro verdad?, gracias por tu tiempo.
Haz la prubea de cambiar esta linea button.text(‘Uploading’); por esta otra button.html(‘Uploading’);
Muchas gracias por el aporte quisiera saber si me puedes ayudar, para hacer una validacion de tamaño de archivo antes de subirlo, es decir en lugar de verificar la extensión que se valide que no pese más de 500 kb.
gracias!
Hola, la verificación de tamaño no se puede hacer usando javascript sino con un lenguaje del servidor, es decir una vez subido el archivo y no antes.
Ok, entiendo como deberia hacerlo en este caso para usar este mismo plugin.
Muchas gracias por tu ayuda.
Hola, probé el script y funciona bien. Ahora tengo un problema,necesitaria además de subir un archivo enviar todo un formulario y mostrar como respuesta un mensaje generado en php que se encuentra en upload.php y no un texto generado en javascript. Muchas gracias por tu ayuda.
Hola, yo probe este plugin de jquery, pero recientemente con la versuib de Firefox 3.6.8 ya dejo de funcionar en este navegador, alguna solución??
Hace unos dias instalé FF 3.6.8 y funciona el plugin ¿No estarás usando una versión BETA?
Hola, Quisiera saber si tiene un limite maximo de tamaño del archivo a subir, pues trato de subir uno de 7 MB y no lo sube. Espero que me puedan ayudar!! gracias
Efectivamente hay un límite que esta dado por la configuración de tu servidor
muy buena ya lo implemente pero en la accion de un boton asi puedo hacer por ajax completo
Hola he usado tu codigo y funciona muy bien pero me gustaria saber como podria hacer que sirvira tambien cuando cargo el elemento boton como respuesta de una solicitud ajax ya que cargo mi contenido pero no se como usar .live() para hacer que los botones nuevos sigan funcionando.
Gracias