Cuando iba a Internet, y a la vez estando en el instituto, siempre veía como los alumnitos desarrollaban sus aplicaciones Web, y algo que me llamó mucho la atención fueron las subidas de archivos que hacían al servidor. Obvio que yo había visto ese tipo de aplicaciones muchas veces, pero lo que me intrigaba era el cómo poder subir varios archivos en simultáneo, ya que me llegaba a la pinga estar eligiendo uno por uno los archivos que uno quería subir cuando uno recién desarrollaba ejemplos de esta clase.
Yo pensaba que tal cosa no se podía hacer, hasta que descubrí, por “accidente” (mientras buscaba porno, a quien engaño), un plugin desarrollado en JQuery llamado Uploadify, el cual, no sólo realiza esta forma de subir archivo bastante útil, sino que además, nos ofrece determinadas propiedades con las cuales podemos controlar los archivos que subimos, y por si esto no fuera poco, darle una mejor presentación a nuestro famoso botón “Examinar”.
Para empezar, simplemente agregamos estas tres líneas de código entre <body> y </body>:
Código:
<div id="listaArchivos" class="listaArchivos"></div>
<input name="inputArchivo" type="file" id="inputArchivo" />
<a href="javascript:jQuery('#inputArchivo').uploadifyClearQueue()" class="linkCancelar">Cancelar todo</a>
Luego, nos disponemos a agregar los scripts necesarios para el ejemplo:
Código:
<script language="javascript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/swfobject.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
Los cuales puedes descargar desde la página oficial:
http://www.uploadify.com
Ahora presta atención a la siguiente línea:
Código:
<script language="javascript" type="text/javascript" src="js/swfobject.js"></script>
Te preguntarás ¿Por qué necesito un script para animaciones flash? Lo que pasa es que este plugin lo que hace es hacer uso del Flash para realizar la subida simultánea de archivos, y a la vez comunicarse con la página Web de manera asíncrona, así no se recargará la página si no queremos. Por eso es necesaria la utilización de este archivo.
Nota: Si te has dado cuenta debiste haber descargado YA los archivos de la última versión para poder seguir trabajando, sino debo entender que eres imbécil y aparte tienes SIDA.
Extraes los archivos, y luego copia (preferentemente), los archivos con extensión .php (uploadify.php, check.php), al mismo nivel de la página desdela cual vas a subir los archivos. Los archivos .js y .css pueden estar donde se te den la gana, pero para un mayor orden creales a cada uno una carpeta según su tipo. Hay que ser ordenados, así demostrarás que no eres un reguetonero sidoso mediocre, que no puede hacer nada mejor que chupar penes.
Imagen que demuestra mi super-heterosexualidad y mi gran intelecto.
Ahora construiremos el "subidor" de archivos:
Código:
$(function() {
$('#inputArchivo').uploadify({
'uploader': 'swf/uploadify.swf', //Archivo flash, el cual hará de interfaz para subir los archivos. Aquí tienes que definir su ubicación en tu directorio.
'script': 'uploadify.php', //Archivo .php, aquí está el script para hacer la subida de archivos. Revísalo, te sorprenderá lo simple que es.
'queueID': 'listaArchivos', //El id de la división o capa donde se mostrará el proceso de carga de los archivos a subir
'buttonText': 'Examinar', //Etiqueta o título que tendrá el botón. Puedes ponerle el texto de tu preferencia
'wmode': 'transparent', //Indicia que el botón de subida será transparente, para que combine con cualquier color de fondo que le des a tu página.
'auto': true, //Sube automáticamente los archivos.
'multi': true, //Permite la subida en simultáneo de varios archivos.
'cancelImg': 'cancel.png', //Cuando cada archivo suba, tendrá cada uno su propio progreso. Esto define la imagen que te servirá como botón para cancelar el progeso de un archivo.
'folder': 'archivos', //La ruta del directorio a donde quieres subir las imágenes.
onAllComplete : function(event, data){ //Este evento es propio de Uploadify, y se ejecuta cuando la transferencia de archivos ha sido completada con éxito.
alert(data.filesUploaded + ' archivos subidos correctamente'); //Mostramos en un mensaje la cantidad de archivos subidos, utilizando la propiedad filesUploades, que nos devuelve dicha cantidad.
}
});
});
Si todo sale bien, ahora podemos ir a ejecutar nuestra página:
Espero que les haya gustado este ejemplo, que no es sino un paso para lo que verán más adelante. Les aseguro les va a servir de mucho.
Uploadify es una alternativa muy útil, para más información haz click aquí y aquí
¿Dudas? Escríbeme a: lovelessisma@gmail.com
¿Mentadas de madre? Escríbeme a: lovelessisma@gmail.com
Descargar
Me gusta:
Sé el primero en decir que te gusta esta post.
hola queria darte las gracias personalmente esto funciona ala perfeccion hermanoo .. Mil gracias.. (y) le echare un vistazoo ..
.. y graxx nuevamente .. exelente trabajo..
Muchas gracias amigo, comentarios como el tuyo son de los que me animan a continuar, sería de mucha ayuda si pasas la voz respecto a mi blog y a mi trabajo, te agradezco bastante. Cualquier cosa no dudes en escribirme a lovelessisma@gmail.com.
Jo tío, me he descargado tu archivo de Mediafire y me ha funcionado perfectamente a la primera! Viva la madre que te parió!
Por cierto hay una nueva versión de uploadify, pero no consigo hacerla funcionar a partir de su documentación. Con lo tuyo a la primera. Gracias!
holaa gracias x el informe detallado jajaj naa si funciona ala perfeccion jajajaja .. ando chacando unas cosas aver pero ehh esta bien.. y es ssencillo .. y ta buena tu imagen de ejemplo jajajaja :$ Graxx hermano
Gracias muchachos, sus comentarios me alientan.
Por cierto David, si hay una nueva versión, pero siempre mi lógica respecto a lanzamientos nuevos es esta: espero a que se ponga más estable, mientras tanto, sigo trabajando con la versión anterior. Espero lo tomes en cuenta.
Hola buenas tardes, mirando el articulo trate de hacer lo que describian aca pero al momento de subir todo al servidor:
1. La primera vez no ocurrio nada solo salio un error interno el error 500.
2. Le cambio el nombre de index.php por index.html y ahi aparecio todas las imagenes pero al tratar de subir una imagen me salio error de subiday desvinculada la imagen de cancelar.
3Que debo hacer por que ya he mirado muchas veces lo mismo y nada
Les agradezco si me ayudan por favor!!
Otra cosa ! donde se que quedan guardadas las imagenes que voy sobiendo o los archivos que voy subiendo… en un momento me sirvio pero ni idea donde quedaron guardados los archivos de eso.
Otras vez Gracias!
Hola Juana, mira para empezar debes mirar en la página index.php (o index.html, ya que le cambiaste el nombre) e ira estas líneas:
<script type="text/javascript"> $(function() { $('#inputArchivo').uploadify({ 'uploader': 'swf/uploadify.swf', 'script': 'uploadify.php', 'queueID': 'listaArchivos', 'buttonText': 'Examinar', 'wmode': 'transparent', 'auto': true, 'multi': true, 'cancelImg': 'cancel.png', 'folder': 'archivos', onAllComplete : function(event, data){ alert(data.filesUploaded + ' archivos subidos correctamente'); } }); }); </script>Fíjate en esta línea, es la que define donde suben los archivos:
‘folder’: ‘archivos’,
Ahora bien, puede ser que esté mal ubicada, o puede ser que simplemente tu servidor no tiene los permisos suficientes para permitir la subida de archivos por este método. Y si la imagen del cancel está desvinculada, es un error de origen XD. Así que ve a la siguiente línea:
‘cancelImg’: ‘cancel.png’,
Y cambiale por la ruta de la imagen que tengas para cancelar.
Lo que me parece raro es que no haya leído las imágenes, a tal punto de haber tenido que cambiarle la extensión a .html :S. Aunque viendo bien, pueden ser los permisos o los comentarios que he puesto al inicio del código fuente de la página.
No te olvides de revisar la ruta del directorio, y de los permisos del mismo. Cualquier duda escríbeme a lovelessisma@gmail.com, el correo del blog.
Atentamente, Loveless.
Viejo, una pregunta algo parecido pero en .Net
que en PHP nitido pero me es algo dificil trasladarlo a .Net
Revisa este enlace, espero te ayude: http://www.technowise.in/2009/12/uploadify-aspnet-c-vb-examples-demo.html
hola como restringes la extension de los archivos por ejemplo para que pueda solo subir imagenes .jpg? saludos !!
En el archivo uploadify.php descomenta todas las líneas que contengan las variables que tienen que ver con extensiones, estas son: $fileTypes, $typesArray, $fileParts.
Luego el código javascript en el que haces la llamada a uploadify tiene que quedar más o menos así:
$('#tucampoFile').uploadify({ 'uploader' : '/uploadify/uploadify.swf', 'script' : '/uploadify/uploadify.php', 'cancelImg' : '/uploadify/cancel.png', 'folder' : '/uploads', 'fileExt' : '*.jpg;*.gif;*.png', 'fileDesc' : 'Archivo de imagenes' });Si deseas sólo jpg, pues es más que obvio lo que tienes que hacer.
¡Suerte!
gracias funciono! xD