Usuario anónimo ¿Quieres tener tu propio blog?
Crear blog gratis en OboLog

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

jueves, 23 de marzo del 2006 a las 23:17
guardado en , , ,

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.

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

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

Alfredo Alfredo

Miguel, vi tu ejemplo en el server y creo que funciona bien, al menos no hay mensajes de error.

vicman vicman

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

Ariel Ariel

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 

jasdevildeil85 jasdevildeil85

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

Miguel Miguel

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!

Miguel Miguel

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?  Llorando

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.

Emilio Emilio

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!

Fran Fran
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.


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...Llorando

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! 

Santiago Santiago

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

Oscar Oscar
Me pasa lo mismo que a Santiago. Vale para PHP 4.x ? o se necesita PHP5?
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.

Oscar Oscar

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 Oscar

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. 

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

Interesante script!!

necesitas instalar algo en tu server para que funcione? 

El archivo http://www.mysharefile.com/v/1230849/upload_ajax_2.zip.html ya ho está disponible. ¿Alguien puede subirlo de nuevo?. Gracias.

Simplemente, cojonudo. Va muy bien. Asias.

 Chulo

Jesus Jesus

hola, he bajado el script.. y no lo puedo hacer correr, es necesario el apache y el pearl?? gracias

Jose Felix Jose Felix
Lo mejor que he visto hasta el momento,,, tanto el diseño como la funcionabilidad es excelente

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

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?
Zully Zully

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

114v 114v

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.

 

Alex Alex
Muy, pero muy bueno, te luciste!!! Burla

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. 
 

 

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

TeLiX TeLiX

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

phatscum phatscum

Can someone please email (phatscum()gmail.com)me the updated version of this fine script?

Thanks in advance :)

Maria Maria

SaludosEnfadado :

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 mueroBeso.

cariños y besos

Raul Raul

   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!
 

TeLiX TeLiX

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;

Bryan Bryan

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

Jose Manuel Jose Manuel

Saludos, ... Hermano intente descargar el archivo y el mismo se encuentra corrupto, como podria descargarlo de manera segura?

   De antemano mil gracias...!

ed ed

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?

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

Deja tu comentario
Necesitas tener javascript activado para poder dejar comentarios

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

De esta forma, además, podrás mostrar tu imagen en los comentarios y no tendrás que rellenar tus datos cada vez.

Sobre esta anotación

Albert Garcia

Albert Garcia escribió esta anotación hace 5 años. En ella habla sobre Ajax, Desarrollo Web, Php y Web 2.0.

136 personas han dejado ya sus comentarios.

Tú también puedes dejar el tuyo.

Login

Comentarios

Una pastilla de Keledén al dia y... di adiós a tus preocupaciones (belen maldonado)
para la depre no hay mejor un monton de aspi. con cola y asi soñare por siempre...(10 feb)
Los blogs de OboLog en los buscadores (discotecas barcelona)
la verdadc que yo lo estoy utilizando y es buenisimo! ...(06 ene)
Una de gallegos (hello)
PEDRITO Y ANONIMO ¿alguna vez habeis estado en galicia? por los comentarios que poneis parece que ......(05 ene)
Vacaciones en Roma: de vuelta de la Ciudad Eterna (Marta)
La verdad es que Roma es una ciudad con mucho encanto, y enamora... Pero si tuviera que elegir sólo ......(04 ene)
CRASH camisetas (DesguacesVehiculos)
Cuál es le precio y el coste con gastos de envío dentro de la península?...(04 ene)

Más comentados

Disco duro para tu ps2 (192)
Conectar un disco duro a tu Playstation 2, hacer copias de seguridad de tus juegos a ese disco ...
Esa bonita canción entre anuncio y anuncio (173)
Se llaman Múm y la canción se titula Green Grass of Tunnel. ¿Os suena? Me sorprendió de igual ...
Descripción y fuentes del upload PHP + AJAX con barra de progreso (136)
Días atrás comenté que había estado trabajando en un pequeño experimento para conseguir implementar ...
Català - Valencià (59)
Siguis o no català o valencià , de ben segur estaràs al dia de la discusió que ha tingut ...
Que tinguem sort (26)
Esta canción es preciosa. Me gustaría poder estar en su piel y ser suficientemente fuerte como para ...

Suscripción

Suscríbete al Feed RSS XML

También puedes suscribirte directamente con alguno de los siguientes enlaces:

  • Suscríbete en Bloglines
  • Suscríbete en Google