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?