Avisar de contenido inadecuado

Upload de archivos y progressbar con PHP,Perl y AJAX

{
}

Aún cuando no he conseguido desentramar el misterio de la antena reaparecida, otra misteriosa casualidad ha roto mi paz interior, esta vez relacionada con el trabajo.

Hoy al llegar a la oficina me he encontrado con una recomendación por mail en qué se citaba un artículo en inglés que habla acerca de un sistema de carga de ficheros con barra de progreso usando técnicas AJAX y PHP+Perl como lenguages de servidor.

Da la casualidad que llevo semanas intentando montar un sistema así para el upload de videos y audio en OboLog , y de hecho hace algunos días que he conseguido una primera versión funcional, y me ha sorprendido que el artículo de Thomas Epineer, "Asynchronous file upload with AJAX progress bar in PHP", se ha basado exactamente en los mismos proyectos que el "mix" en qué he estado trabajando, como apunté días atrás en la lista de correo de JQuery.

Realmente hasta ahora no habia nada sobre el tema, y los únicos acercamientos al upload de archivos que hacían uso de AJAX, como el de Martin Konicek , dejaban de lado la posibilidad de saber en cada momento qué porcentaje del archivo llevamos cargado, debido en parte a la limitación de PHP al respecto ( PHP no permite acceder 'en bruto' a los datos POST durante el envío ).

El ejemplo de Martin va orientado principalmente al upload de imágenes para una galería y esto significa que los archivos no serán, en principio, demasiado grandes. En este caso una barra de upload no es imprescindible, puesto que los tiempos de carga serán generalmente bastante bajos, y además los ficheros se van cargando en paralelo,en segundo plano, cada vez que el usuario selecciona uno.

En otras situaciones, sin embargo, como sería el caso de vídeos, archivos de audio, o documentos de cierto tamaño ( > 1 MB ), es mucho más probable que la demora en la carga pueda provocar desconcierto en el usuario y una ocasional cancelación por su parte, reenviando el formulario o volviendo atrás para probar de nuevo. La barra de progreso permite que mantengamos informado en todo momento al usuario del estado del upload que está realizando, y nos evita problemas, consecuencia de las largas esperas y la falta de información acerca del estado de su solicitud.

La limitación de PHP la podemos solventar simplemente usando otro lenguaje a la hora de gestionar la carga de los archivos al servidor: un CGI en Perl. Buscando un poco (tampoco había mucha literatura sobre el tema, como os comentaba), en raditha.com encontré un script que hacía precisamente esto: combinar PHP y CGIs para conseguir un upload con barra de progreso: Mega Upload. . Básicamente lo que hace es generar varios archivos en una carpeta temporal con datos acerca de la carga que se está realizando: Tamaño total del envío, nombre de los archivos que se envían, y datos en bruto del envío post combinando todos los archivos contenidos. Sólo queda acceder a esos datos de manera repetitiva mientras se lleve a cabo el upload para ir dibujando la correspondiente barra de progreso.

En la implementación de AJAX, sin embargo, hemos usado herramientas diferentes. Thomas ha usado Prototype, una librería Javascript muy potente (¿os suena script.aculo.us?) que permite simplificar algunos procesos para el acceso y la modificación de los elementos DOM y el uso de peticiones asíncronas via XMLHttpRequest ( AJAX, vamos ). Sin embargo, uno de los problemas de Prototype es, a mi parecer, el excesivo peso de la librería por si sola ( sin tener en cuenta ya el peso total de las librerías JS necesarias si pensamos usar todo el potencial de script.aculo.us ). La versión de Prototype incluída en el ejempo de Thomas pesa más de 40Kb.

Para llevar a cabo el experimento que he mencionado arriba he usado una librería que descubrí hace poco: JQuery. Permitidme tirarme a la piscina, y asegurar sin demasiado miedo a equivocarme, que creo que JQuery es una auténtica revolución. En menos de 15Kb de peso tenemos una librería que permite simplificar en extremo la sintaxis de Javascript, acceder y modificar el árbol DOM usando sintaxis de CSS1,2 y 3, XPath y algunos métodos propios, aplicar efectos visuales sencillos y ejecutar peticiones AJAX, así como parsear las respuestas resultantes en XML o usarlas para escribir directamente dentro de contenedores de la propia página. Podría extenderme largamente, y posiblemente lo haga en el futuro con un post dedicado a JQuery en exclusiva, pero ahora mismo lo más sencillo es que entréis a su web y echéis un vistazo a la documentación y los ejemplos de uso. Sencillamente es-pec-ta-cu-lar. De hecho la estoy usando para simplificar librerías que uso para otros menesteres, adaptándolas al "JQuery way of coding". Os aseguro que la mejora en cuanto a ahorro de espacio y simplificación es del orden del 70%. También debo decir, por otra parte, que tiene algunos puntos débiles: las funciones AJAX devuelven errores o no funcionan correctamente en algunos navegadores. JQuery se encuentra en contínua evolución, así que estoy seguro de que pronto las solucionarán estos problemas.

El toque final, la idea de seleccionar varios archivos usando un _aparentemente_ único campo "file" la tomé prestada de un artículo que leí hace un tiempo en StickBlog, "Upload multiple files with a single file element". El tema es ir creando dinámicamente nuevos campos file a medida que el usuario va seleccionando ficheros, e ir ocultando los campos file ya usados. Adicionalemente, para llevar un control de todos los ficheros seleccionados, se va creando una lista con los nombres de los archivos. Hacer todo esto con Jquery no són más de 5 líneas de código ( lo podéis comprobar revisando el código fuente del experimento).

Bueno, y eso es todo. Espero que alguien pueda sacar provecho de todo esto, después de la parrafada! Al final la sorpresa me ha inducido a reflexionar en voz alta y dejar por escrito algo en lo que llevaba "trabajando en silencio" desde hace un tiempo. Los usuarios de OboLog lo veréis en funcionamiento dentro de poco. Tened paciencia. Guiño

{
}
{
}

Comentarios Upload de archivos y progressbar con PHP,Perl y AJAX

Ciao Albert,he buscado toda la web para una solucion di "progress bar" y la  tua es la mas fantastica. Con Edmond, me gusteria conseguir el codigo fuente se possible. Muchas Gracias.
Roger Roger 21/03/2006 a las 16:53
please post your code, I would love to see it
the dude the dude 22/03/2006 a las 04:27
El código de una de las partes, el javascript necesario para los efectos visuales y las peticiones AJAX, lo podéis ver accediendo a "Ver código fuente" en la URL del ejemplo: http://www.obolog.com/upload.php, para el resto, es decir, la modificación del script CGI en base a MegaUpload, y el script PHP que lee es estado del fichero para generar el XML que se leerá por AJAX, dejadme que prepare una copia limpia de los mismos y lo colgaré en un nuevo mensaje en el blog. Os avisaré en este mismo hilo cuando lo tenga disponible ( espero que pueda ser hoy ).
the dude:you can see the JS code using "View Source Code" at example's URL: http://www.obolog.com/upload.php . I'll post here the rest of scripts' code, when I have made a "clean copy" of it, that you can easily personalize.
obokaman:Thank you! You are the man. ChuloI've tried to use Mega Upload in the past, but didn't have much luck with it. I'm hoping that your mods will help me out.
the dude the dude 23/03/2006 a las 05:50
looking forward to seeing this! how's the 'cleanup' coming?
dea dea 23/03/2006 a las 17:54
Thank you obokaman!
the dude the dude 24/03/2006 a las 17:52
Hola gente necesitaria una cosa si me pudieran mandar al mail o decirme el codigo modificado para subir cualquier tipo archivo no solo gif y jpg desde ya Gracias.


aripGuiño
arip arip 04/05/2006 a las 03:21
Todo esta muy bien! ...
Pero el detalle mas importante de todos.-
que pasaraia si algun dia esta web http://jquery.com/src/latest/ deja de estar OnLine!sera que abra alguna forma de ser autonomo en este codigo?
Leugim Leugim 10/05/2006 a las 23:25
 Leugim: obviamente, en un sistema en producción, el fichero JS debería estar en local. Ya sabes, "Guardar como..." SonrienteJquery es un proyecto reciente en contínuo desarrollo. Aunque depende de una sola persona, hay un grupo de desarrolladores muy activos que mejoran y amplían muy a menudo las funcionalidades de la librería, así que apuntar a la última versión estable oficial en el script es una manera de evitar que cualquier persona que lo descargue tenga una versión obsoletade la librería.¿Ese era el detalle más importante? GuiñoUn saludo! 
Lo que quiero saber es que es necesario usar los scripts cgi para hacer un progressbar, he buscado en toda la web, para poder hacer uno al subir mis archivos... pero todos me ponen cgi... y aunque mi servidor tiene una carpeta bin-cgi y otra www que es donde subo mis archivos.. nose como hacer referencia una de la otra... Kisiera que alguien me ayudeIndeciso
Kelthuzad Kelthuzad 14/06/2006 a las 03:34
De los ejemplos que hay en jquery solamente me funciono uno solo con Firefox. Tiene un largo camino para ganarse la confianza. Aparte, soy medio holgazan para el desarrollo: me podes pasar el codigo del verificador matematico de estos comentarios? Gracias. Aparte, te lo digo en Argentino: Que lindo guacho que sos!
Andres Andres 11/08/2006 a las 15:05
Hola no logro poner a trabajar la barra que sera alguien que ya lo haya podido hacer solicito ayuda porfavor con migo no quiere jalar gracias contactenme smenasolis@gmail.com para q me expliquen porfavorAvergonzado
santiago santiago 15/08/2006 a las 17:07
Gracias vi en funcionamiento la barra y me parece excelente, pero no logro ponerla a trabajar si alguien puede ayudarme por favor alejo_ard@yahoo.om. adicionalmente me gustaria saber si es posible hacer una barra del mismo tipo para descargas o almenos saber si un archivo es descargado completamente.gracias....
Alejandro Alejandro 15/09/2006 a las 16:15
Thank you obokaman!
okan ozkan okan ozkan 26/06/2007 a las 02:15
No entiendo por que hablas de todos y tienes una pagina upload de test que no sirve!
http://www.obolog.com/upload.php
Creo que debes chequearla, varias veces me he encontrado con esta pagina buscando y esto y siempre que la testeo no sirve! 
Plur Plur 23/08/2007 a las 16:11
Pues llevas toda la razón Plur, sólo que el post lo escribí hace ya más de un año y medio... y el script de demostración pasó a mejor vida.
De todas formas, en mensajes relacionados tienes un link a este otro post: http://www.obokaman.com/p/descripcion-y-fuentes-del-upload-php-ajax-con-barra-de-progreso-1596, desde el cual se explica el funcionamiento del script y se ofrece a descarga el script original.
Espero que te sirva.
Un saludo. 
El swfupload por el momento no funciona con flash player 10, hay que esperar un update, parece una gran opción por lo sencillo de utilizar pero digo ¿con cada versión de flash player nueva todo se viene a pique y debemos retocar la web de cada cliente? de ser así no veo tampoco las ventajas de esta utilidad.
Alfredo 18/10/2008 a las 16:58
Hola, en el blog de Código Fuente en el que participo hay una línea de desarrollo en este sentido; es decir, upload de archivos con PHP + Ajax + Perl.
Además también hay otra línea de desarrollo para un uploder en Flash + PHP.
Todo con soporte en español.
Pepe Pepe 17/02/2009 a las 17:07
[...]p> El ejemplo es útil para mostrar cómo permitir al usuario subir varios archivos (eventualmente grandes en tamaño) a un servidor. Artículo Relacionados:[...]
no encontre nada
pancrasia pancrasia 23/04/2009 a las 16:21

Deja tu comentario Upload de archivos y progressbar con PHP,Perl y AJAX

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar Tu nombre