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"; } ?> |
//////// Actualización ///////////
He publicado un nuevo post respondiendo algunas dudas e implementando el ajax uploader con la última versión, pueden verlo AQUI
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
hola queria hacer una consulta al realizar el cambio para que me devuelva cualquiier respuesta, y no solo el nombre de la imagen deja de funcionar el script.
$(\\\’#lista\\\’).appendTo(\\\’.files\\\’).text(‘Subida exitosa’);
Hola
Nadie se ha dado cuenta que al añadir el fichero a la lista realmente no realiza un append si no que se queda solo con el ultimo añadido, es decir, si subimos dos ficheros en la lista solo nos queda el segundo. Alguien conoce la forma de que todos los ficheros subidos permanezcan en la lista???
Gracias
Hola (Otra vez)
La solucion que yo he encontrado es sustituir la linea donde se hace el appendTo:
$(‘#lista’).appendTo(‘.files’).text(file);
por esta otra que si cumple el proposito:
$(«#lista»).append(«» + file + «»);
De esta forma si que se genera el listado de forma correcta 😀
salu2
Hola (Otra vez)
La solucion que yo he encontrado es sustituir la linea donde se hace el appendTo:
$(\\\’#lista\\\’).appendTo(\\\’.files\\\’).text(file);
por esta otra que si cumple el proposito:
$(\\
una pregunta: ¿cómo obtener una respuesta de si el archivo fue o no subido satisfactoriamente?
otra pregunta:
si el div «upload_button» esta anidado dentro de otro div, ¿cómo se accedería a este?
#
Carolina says:
June 25, 2010 at 9:34 am
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!
#
admin says:
June 25, 2010 at 10:16 am
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.
#
Carolina says:
June 26, 2010 at 3:30 pm
Ok, entiendo como deberia hacerlo en este caso para usar este mismo plugin.
Muchas gracias por tu ayuda.
si bien no se puede verificar el tamaño antes de, se puede limitar:
donde value es el tamaño maximo en bytes
y como se le pasan otros parámetros?
como mejor dicho, usar setData q es el q veo pasa parametros extra por post?
Logre que me funcionara despues de muchos problemas por mi parte, pero al parecer solo funciona con el jquery-1.3.1.min.js, porque si pongo uno mas actual pues no sirve. entonces puse los dos ese y el jquery-1.4.2.min.js.
¿Alguna idea de porque?
Saludos,
Excelente ejemplo y aportacion. Lo utilice en C# ASPNET y trabajo super bien. Te felicito. Una pregunta se podra hacer que suba la imagen utlizando un boton aparte. Me explico, actualmente sube la imagen de inmediato y me gustaria si no es mucho pedir si se pude anadir otro boton para que haga la carga depues de seleccionar el archivo.
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.
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?
Como hago para que me salga la ruta completa del la imagen donde se guardoo
No funciona cuando pongo positio:relative; o absolute, que puedo hacer.
Hola,
Gracias por facilitarme la introducción a Ajax con este ejemplo.
Lo he probado y he conseguido que funcione bien en todo menos en iphone.
Sobre IPhone no se abre el explorador para buscar la imagen. He estado buscando en internet i no encuentro nada que haga referencia esto.
Sabeis a que se puede deber mi problema.
Muchas gracias.
Te puedo hacer una consulta sobre subir archivos al servidor usando ajax
Y como funcionaria con JAVA?
a qu te refieres con userfile?
Gnial gracias!
Buenas, gran aporte, gracias.
Sólo una cosita, necesito cargar la imagen en un , y aunque soy capaz de modificar el src de la imagen con jquery, no consigo obtener la ruta completa de la imagen subida en el servidor. ¿Es posible?
Saludos.
como puedo usar ete mismo metodo solo que renombrando el archivo. lo hago con el fin de que pues como al subir el archibo surge el problema de que otro usuario sube el uno distinto pero con el nombre y ext iguales, entonces surqge el problema que lo sobre escibe como puedo cambiar el nombre del archivo?
Como puedo pasar el valor del id=»lista» a una caja de texto? o poder enviar vía post ese valor?
necesito subir archivos con cakephp y registrarlos en la base de datos..
el ejemplo es exacto lo que quiero.. pero no logro hacerlo funcionar.. alguna idea de como hacerlo funcionar con este framework?
Perfecto, andaba buscando un uploader para mi panel de gestión propio
El desarrollo en un PC rula bien, pero en un IPhone cuando seleccionas una foto o haces una desde la CAM, vuelve a la pagina anterior y no a la de donde esta el botón. Espero que se entienda así.
Puse una pagina XX.html que llama a subir/index.html (que es tu desarrollo), pues cuando selecciono o hago foto en iPhone me retorna a XX.html.