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.
- Deja tu comentario (136)




Comentarios sobre Descripción y fuentes del upload PHP + AJAX con barra de progreso - página 2
Miguel, vi tu ejemplo en el server y creo que funciona bien, al menos no hay mensajes de error.
Hola, primero k todo muchas gracias, se ve muy interesante y util este sistema.
Quisiera preguntarte si tambien funciona con ASP o solo contiene comandos para PHP.
Gracias
Esta weno el script pero no me funciona
digame si he cometido algun error
http://musica.erostlv.com/upload.php
Hola, como muchos en este blog tengo el problema de que la progress bar no se mueve y el file upload no se realiza. Existe un zip que contenga la version final para poder usar tal como se demuestra en http://www.obolog.com/upload.php ?
Muchas gracias por su tiempo y agradezco su ayuda
ey yo tengo el play y nesesito que me digan si al play le puedo poner dvds gravados mil piratas por favor poner noticia aqui
Ariel, estoy en tu misma situación aunque yo he conseguido que se mueva la progress bar no consigo que el archivo se copie al directorio.
Si pudieran tener la versión final sería de gran ayuda. Gracias a todos por hacer esto posible.
MIGUEL, yo al contrario tuyo he logrado subir el archivo, pero no hacer correr la progress bar. Enviame un correo con lo que hiciste tu, yo me encargo de arreglar lo que me falta y publicar el codigo en mi server para que lo bajen los demas.
Mi msn, arrobared@hotmail.com
PD: Gracias Obokaman por tu ayuda!
Hola a todos/as
¿ Alguien sabe como se puede limitar el tamaño máximo del archivo? Efectivamente el upload.cgi tiene una variable con la que se limita, pero al ejecutar el script no aparece ningún mensaje de alerta y aparece continuamente "cargando..."
Más concretamente la funcion bye_bye no parece hacer nada.
Un saludo
Al fin, puedo ejecutar el script, pero no en mi hosting. En mi hosting el log de errores me arroja:
[22-Aug-2006 14:15:35] PHP Fatal error: Cannot redeclare class xmlwriter in /home/cristali/public_html/xml.class.php on line 61
Esta todo igual en los dos hosting, los permisos, los path de acceso, pero no logro que en mi hosting se ejecute el script, se suben los archivos a la carpeta tmp, pero ahí quedan.
Espero que alguien me pueda orientar porque en un host puedo ejecutarlo y en el mió no.
Gracias.
Hola Felipe,
posiblemente no puedas ejecutarlo por la versión de PHP que está corriendo. Creo que el nombre de la clase XMLwriter entra en conflicto con alguna función reservada de PHP5. Prueba a cambiar el nombre a la clase, tanto en su definición como en todos los lugares donde se instancie, y debería funcionarte correctamente. Cambiale el nombre a, por ejemplo, XMLPusher, y me cuentas.
Un saludo!
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
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?
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.
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.
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!
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.
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...
PD: siento no haber contestado antes pero no he estado en casa.
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!
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
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?
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)
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.
Interesante script!!
necesitas instalar algo en tu server para que funcione?
Simplemente, cojonudo. Va muy bien. Asias.
hola, he bajado el script.. y no lo puedo hacer correr, es necesario el apache y el pearl?? gracias
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
Hola, me gustaria saber si alguien tiene el archivo "final" de este script... esta muy bueno y me gustaria tenerlo para probarlo
Si alguien lo tiene me lo puede enviar por mail?? zully.chumpitaz@gmail.com Gracias.
Can you make with only php (not CGI)
Thanks
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.
Does anyone still have this? This link is broken.
http://www.mysharefile.com/v/1230849/upload_ajax_2.zip.html
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 No olviden ponerle al archivo upload.cgi permiso 0755 que si no no funcionará . 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.
Buenas, no funciona este enlace:
http://www.mysharefile.com/v/1230849/upload_ajax_2.zip.html
Si alguien es tan amable de volver a subir el zip a algún otro sitio o mandarmelo al email les estaré muy agradecido.
Gracias, saludos.
Pongo mi email, que veo que no aparece en el post de más arriba: david(arroba)davidsantiago.net
Gracias
Enrique la explicacion que has dado serviria de ayuda si dijeras en que parte del cgi hay que poner eso xD
Llevaba buscando siglos algo asi y por fin lo he encontrado. Lo unico que faltan bastantes explicaciones del proceso y los archivos no estan corregidos. Aun asi me he quedado donde muchos otros, se suben los archivos a la carpeta temporal, la barra se mueve pero desaparecen los archivos y no se como moverlos al destino final.
Si alguien lo puede explicar un poco mejor se lo agradeceria :D
Can someone please email (phatscum()gmail.com)me the updated version of this fine script?
Thanks in advance :)
Saludos
:
Vi su demo y esta muy bonito , me encantaria poder implementarlo en mi web pero al momento de extraerlo del zip me sale un archivo sin extension y no puedo utilizarlo , porfavor quisiera que me digan como puedo utilizar este archivo ,les agradezco de antemano su ayuda , es muy urgente sino me muero
.
cariños y besos
Pues lo que todo el mundo pregunta... ¿Dónde podríamos encontrar el upload2.php? No consigo que el php me copie los archivos realmente...
Gracias!
Se me olvido pasar por aqui para contar como me fue. Estuve investigando y encontre la solución, lo siento pero no recuerdo en donde :(
Para que copie los archivos solo hay que modificar la parte encargada de acabar la subida en el ajax_process.php
Lo que esta en negrita es lo que he añadido
case "upload_finish" :
$xml = new XmlWriter();
$xml->push('response');
//if download is finished, we delete the temp raw post data file & additional ones
if ( file_exists(TEMP_DIR.$_REQUEST["sid"]."_signal") )
{
$qstr = join("",file("tmp/{$sid}_qstring"));
parse_str($qstr);
$k = count($file['name']);
for($i=0 ; $i < $k ; $i++)
rename($file['tmp_name'][$i], "ruta_donde_quieres_dejar_el_archivo/".$file['name'][$i]);
unlink(TEMP_DIR.$_REQUEST["sid"]."_signal");
unlink(TEMP_DIR.$_REQUEST["sid"]."_qstring");
unlink(TEMP_DIR.$_REQUEST["sid"]."_flength");
unlink(TEMP_DIR.$_REQUEST["sid"]."_postdata");
$xml->element('status', 'ok');
}
else //or return KO status if it doesn't exists
$xml->element('status', 'ko');
$xml->pop();
print $xml->getXml();
break;
I think your solution is incredible and I am excited to implement it. However, when I download the zip file, it was a corrupt file. Can you repost the files? Or is there somewhere else I can download it?
Thanks
Saludos, ... Hermano intente descargar el archivo y el mismo se encuentra corrupto, como podria descargarlo de manera segura?
De antemano mil gracias...!
Ok, I have go it working (almost) with a PHP file handling the files after they are uploaded. The trouble is I need the upload.cgi script to upload the files with owner nobody.nobody.
I have tried adding:
chmod 0777, @tmp_filenames;
chown nobody.nobody, @tmp_filenames;
but the chown doesn't work. Any ideas...
En Español
Todo esta functionando, menos la parte que he añadido que mueve el archivo descargado do /tmp a /mi/directorio/final
la razon es que uploads.cgi descarga los archivos a otro usuario envede de nobody.nobody
he intentado añadir chown nobody.nobody, @tmp_filenames; a uploads.cgi pero no functiona - alguin tiene ideas?