Avisar de contenido inadecuado

Descripción y fuentes del upload PHP + AJAX con barra de progreso

{
}

Días atrás comenté que había estado trabajando en un pequeño experimento para conseguir implementar un sistema para realizar upload de archivos mediante PHP, que permitiera generar una barra de progreso, con la que controlar el estado de la carga de archivos en todo momento.

A continuación encontraréis disponible para descara el código fuente de dicho experimento y una pequeña descripción del paquete y de los requisitos para su puesta en marcha.

Contenidos del paquete

  • /cgi-bin/upload.cgi: este es el CGI perl que se encarga de gestionar el upload, además de ir escribiendo todos los datos POST en un único archivo que nos permite controlar el total de datos cargados en el servidor en un momento determinado.
  • /upload.php: es el documento principal, que contiene el código HTML y JS necesario para crear dinámicamente los campos file y el listado de archivos que vamos a cargar al servidor, así como dibujar dinámicamente la barra de progreso a partir de las respuestas recibidas por AJAX.
  • /ajax_process.php: es el script PHP que recibirá las peticiones AJAX, comprobará el estado del upload y devolverá una respuesta XML con datos como el tamaño total del archivo, la cantidad de datos cargada, los nombres de los archivos...
  • /xml.class.php: un par de clases para crear/parsear datos XML.
  • /img: contiene dos imágenes opcionales: un fondo animado para la barra de progreso y un icono "en proceso".

Ejemplo en vivo

Podéis ver un ejemplo real en la URL http://www.obolog.com/upload.php

Descarga del código fuente

Podéis descargar un ZIP con el código fuente desde http://www.obolog.com/downloads/ajax_upload.zip

Créditos

La idea de la carga múltiple de archivos la tomé de : Upload multiple files with a single file element

El código del script CGI que permite el upload y la escritura de los datos raw POST es una modificación de Mega Upload, de raditha.com.

Toda la implementación de AJAX se ha llevado a cabo usando la librería Jquery , consiguiendo una simplificación extrema ( vereis que todo el código necesario para la creación dinámica de campos file y la escritura y modificación de la barra de progreso supera en poco las 50 líneas ).

 

Y bueno, eso es todo amigos. Que lo disfrutéis. Preguntas y dudas a los comentarios.

{
}
{
}

Comentarios Descripción y fuentes del upload PHP + AJAX con barra de progreso - página 3

EXCELENTE!!!

Gracias compadre, me funco a la perfección.Bueno, no me queda nada mas que agradecer y dejo mi email por si alguien tiene problemas.Saludos desde CHILE
Felipe Felipe 22/08/2006 a las 22:29
Hola, me ha gustado muchísimo el script, pero no consigo hacerlo funcionar...he cambiado las rutas a la carpeta temp, y parece que el script falla porque no se llegan a crear los archivos _signal y _signal. La carpeta temporal es una que he creado en la carpeta 'public_html' con chmod 777. Entonces, he modificado esto:# upload.cgi# variable values. This folder will host the raw post data during the upload.
$tmp_dir="/home/s0285021/public_html/tmp/"; # ajaxprocess.php (Lo he dejado igual, y he comprobado que las rutas son las mismas en los 2 archivos)
// Put here the same folder that in CGI
define ( "TEMP_DIR", $_SERVER['DOCUMENT_ROOT']."/tmp/" );
//---------------->
El problema es que en la carpeta temporal solo se crean 2 archivos, y parece que por eso nunca termina la barra de progreso. Llega hasta el final pero no pone Carga finalizada con éxito!...¿Alguien que me ayude?  Llorando
Félix Félix 24/08/2006 a las 17:25
Félix, supongo que le diste al upload.cgi permisos 755.
Y para mas seguridad, reemplaza la linea 41 por:
$tmp_dir=$ENV{'DOCUMENT_ROOT'} . '/tmp/';

Lo otro es fijarte si no tienes conflicto con la clase XMLwriter.Pero por lo menos con los datos anteriores deberia crearte los archivos temporales en la carpeta TMP.Salu2.
Felipe Felipe 25/08/2006 a las 06:27
Hola buenas, tengo un problema y es que los archivos temporales se crean bien (los 4), pero a la hora de llevar el temporal a la capeta destino no lo consigo. He estado probando hacerlo desde el CGI o desde el upload2 como han dicho por ahi arriba pero no me hace nada. Si alguien de a los que les va me puden poner este paso o explicarlo como hacerlo se lo agradeceria mucho.Un saludo. 
Emilio 25/08/2006 a las 13:54
Very interesting!http://www.mysharefile.com/v/1230849/upload_ajax_2.zip.html seems to be broken though :( Anywhere else I can get it? Thanks!
hola holaaaaa Beso
jose jose 01/09/2006 a las 02:50
Estimados Amigos:

            Estoy tratando de poner en funcionamiento el script y no logro hacerlo. Tengo un sistema win2000 y he instalado easyPhp para trabajar con mis páginas php. Como indican en el blog, he cambiado las rutas tanto en el upload.php y en el upload.cgi, pero no me carga los ficheros en mi carpeta tmp (no se mueve la barra de progreso, ni me muestra información de lo que está subiendo).

            ¿que puedo hacer? ¿serían tan amables de ayudarme? por favor.

           Muchas gracias por todo.


Fran Fran 01/09/2006 a las 23:08
Hola,  he hecho lo que me has dicho Felipe, pero creo que la he fastidiao...ahora no me crea ningún archivo y la barra no s carga. Pone cargando pero no pasa nada. Soy un negao para esto del AJAX...mira que llevo tiempo intentandolo y no lo consigo...:@Salu2 y ayuda por favor...LlorandoPD: siento no haber contestado antes pero no he estado en casa. 
Félix Félix 04/09/2006 a las 11:19
Ya lo consegui!! Bueno muchas gracias, ya esta hecho. El problema eran los atributos de la carpeta temp. Ahora lo que pasa es que me gustaría que los archivos que subo se movieran a una carpeta en concreto, pero no se como hacerlo. Supongo que sera con move_upload_files, pero como tengo 4 archivos en temp, no se como juntarlos en uno solo que sea el correcto. ¿Alguién sabe cómo hacerlo?Salu2 y gracias! 
Félix Félix 04/09/2006 a las 11:29
Hola me urge que me ayuden porfavor tengo el siguiente problma
http://www.santiagomenas.u13.biz/upload.php 
No empieza a funcionar la barra y no sube los archivos el cgi-bin el archivo y carpeta tien permision 777 y el de img tiene tambien 777
Por favor ayudenme me urge quien pueda contactarme para ayudarme y hacerlo funciónar que me agrege smenasolis@gmail.com Muchas gracias y hasta Luego
Santiago Santiago 06/09/2006 a las 23:39
Me pasa lo mismo que a Santiago. Vale para PHP 4.x ? o se necesita PHP5?
Oscar Oscar 13/09/2006 a las 21:30
Hola chicos,funciona tanto con PHP4.X como con PHP5. El problema pueden seguir siendo  los permisos de ejecución del script CGI. Recordad que no sólo es necesario darle permisos correctos al archivo, sino, además, configurar Apache para permitir la ejecución de CGIs dentro de la carpeta donde se encuentre el script. Os recomiendo echar un vistazo a la página de Apache, donde encontraréis más información acerca de cómo aseguraros que la configuración es la correcta.
El servidor es dedicado y configurado de serie por el proveedor de hosting y he visto que tiene habilitado el tema de los cgi. He probado a copiar el cgi al directorio de scripts y he modificado el upload.php par que apunte a dicha ruta, pero nada.Alguna forma de saber si realmente funcionan los scripts en cgi? 
Oscar 14/09/2006 a las 01:19
Creo que es de los cgi. Me he descargado un cgi que escrbie hola y el navegador no lo ejecuta, sino que visualiza como un texto. Lo he ejecutado en consola y me indica que no encuentra /usr/local/bin/perl , cuando la ruta del perl es /usr/bin/perl  ¿Alguna idea dodne configuro eso? (Fedora core 3)
Oscar 14/09/2006 a las 01:49
Hola de nuevo, Oscar,en el enlace que he puesto antes a los tutoriales de Apache ( http://httpd.apache.org/docs/1.3/howto/cgi.html ), encontrarás información sobre cómo comprobar que el directorio donde se encuentra el script CGI tiene o no habilitada la ejecución de este tipo de scripts. Verás que incluso vienen recomendaciones y ejemplos de scripts sencillos para comprobar el correcto funcionamiento. 
He bajado el script completo ajax_upload.zip, el tema es el sig.
1) A donde apuntan los archivos que deseo bajar
2) Probe subir un archivo pero demora bastante y no veo el archivo quese haya subido correctamente, como tampoco me da el ok como lo hace en la prueba que esta en el link
muchas gracias y perdon, soy extremadamente NOVATO en esto
Atte Raul Lovato
ralsuscri@fibertel.com.ar
Argentina
Raul Lovato Raul Lovato 22/09/2006 a las 04:58
Interesante script!! necesitas instalar algo en tu server para que funcione? 
sirocus sirocus 26/09/2006 a las 13:04
Simplemente, cojonudo. Va muy bien. Asias. Chulo
Lautreamont Lautreamont 04/10/2006 a las 17:12
hola, he bajado el script.. y no lo puedo hacer correr, es necesario el apache y el pearl?? gracias
Jesus Jesus 04/10/2006 a las 22:35
Lo mejor que he visto hasta el momento,,, tanto el diseño como la funcionabilidad es excelente
Jose Felix Jose Felix 05/10/2006 a las 23:20
hola tengo el script andando, me crea los temporales, anda la barra, peor lo que no logro es copiar el tmp a la carpeta final, probe con rename, y con move_upload_file, pero en ambos casos me dice que el archivo no fue encontrado (el temporal del php)...  el upload2 donde esta eso armado que subio alfredo ya no esta disponible por lo que no puedo ver como lo hace.. alguien que me ayuude o ponga online denuevo el archivo de afredo... desde ya mcuhas gracias
Leandro Asrilevich Leandro Asrilevich 11/10/2006 a las 21:13
ya logre que me funcione en linux, pero quisiera que me funcione en windows tambien, el tema es que la funcion rename no me encuentra el archivo temporal subido... que puedo hacer? alguien lo hizo andar en wndiws?
Leandro Asrilevich Leandro Asrilevich 12/10/2006 a las 04:31
Hola, me gustaria saber si alguien tiene el archivo "final" de este script... esta muy bueno y me gustaria tenerlo para probarlo Sonriente
Si alguien lo tiene me lo puede enviar por mail?? zully.chumpitaz@gmail.com Gracias. Sonriente
Zully Zully 25/10/2006 a las 22:38
Can you make with only php (not CGI)
Thanks 
114v 26/10/2006 a las 08:39
Hola, me encanta el script pero no consigo que rule.
A ver, tengo en el servidor PHP 4 con Apache, he visto que se necesita configurar el apache para permitir ejecutar CGI y que además se debe especificar la carpeta que lo ejecuta.
En primer lugar me gustaría saber si alguien me puede explicar como hacer esto pero en español porfa!.
Luego otra cosa: No he entendido bien donde debo colocar los archivos.
Me gustaría si alguien es tan amable de decirme donde colocar cada uno de ellos puesto que en mi cuenta solo tengo una carpeta que se llama cgi-bin y nada más, ni temp ni nada y quería saber si tengo que crearlas yo o que.
Muchas gracias de antemano a la gente que me ayude porque he visto que sois todos unos fieras.
franzoopz franzoopz 28/10/2006 a las 19:03
Muy, pero muy bueno, te luciste!!! Burla
Diego Diego 01/11/2006 a las 21:12
HOla a Todos!
Hay algunas cosas que me han pasado al intentar hacer correr este script y que quizas puedan ser de ayuda para muchos.
Una de las cosas que más me complicó , fue el tema de que mi servidor no me dejaba acceso a la carpeta en que subía los archivos el perl, por lo que no podía de ninguna manera a mover los archivos a la carpeta final. A esto lo pude solucionar subiendo los archivos desde el perl directamente a la carpeta donde el php tiene acceso y de alli si moverlo al archiv final (habrá luego que borrar estos archivos temporales que crea el perl y borrar también de vez en cuando los archivos temporales que no fueron completados). VER
use File::Temp qw/ tempfile tempdir /;



$dir = tempdir( CLEANUP => 1 );

($fh, $filename) = tempfile( DIR => $dir );



($fh, $filename) = tempfile( $template, DIR => $dir);

($fh, $filename) = tempfile( $template, SUFFIX => '.dat');



$fh = tempfile();Otra cosa que me tuvo un poco loco es el tema de los permisos del .htaccess que en algunos servidores hay que poner en este .htaccess dentro de la carpeta cgi-bin

<FilesMatch "(upload.cgi)">
SecFilterEngine Off
</FilesMatch>

No olviden ponerle al archivo upload.cgi permiso 0755 que si no no funcionará .

Bueno , espero que sirva el aporte.

Yo lo he adaptado para que funcione con sajax y anda muy bien pero no es grande la variación. si alguien lo requiere solo haganme el pedido que trataré de subirlo. 

enrique enrique 06/11/2006 a las 05:16

Deja tu comentario Descripción y fuentes del upload PHP + AJAX con barra de progreso

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

Avatar Tu nombre