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 4

Pongo mi email, que veo que no aparece en el post de más arriba: david(arroba)davidsantiago.net
Gracias
David David 15/11/2006 a las 10:21
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
TeLiX 18/11/2006 a las 14:14
Can someone please email (phatscum()gmail.com)me the updated version of this fine script?
Thanks in advance :)
phatscum phatscum 03/12/2006 a las 00:10
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
Maria Maria 04/12/2006 a las 04:41
Bump!
phatscum 11/12/2006 a las 01:36
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!
Raul Raul 12/12/2006 a las 12:31
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;
TeLiX 01/01/2007 a las 17:26
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
Bryan Bryan 05/01/2007 a las 22:50
Saludos, ... Hermano intente descargar el archivo y el mismo se encuentra corrupto, como podria descargarlo de manera segura?
De antemano mil gracias...!
Jose Manuel Jose Manuel 11/01/2007 a las 21:37
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?
ed ed 13/01/2007 a las 18:15
Hola, se ve que el script funciona de maravilla, pero no he podido bajar el codigo, el zip esta corrupto y en los otros links que encontre en los post estan rotos. Por fa si alguien tiene un link o los script se los agradeceria mucho !
SALUDOS !
Franz Franz 13/01/2007 a las 21:36
In the end, it was PERL that did not have permission to change the owner or the group of the uploaded files. This meant that PHP could not move / rename or do anything with them.
In the end, my web host disabled suexec from my server, which enabled PERL to create files with 'nobody' as the default group and owner. The script now works.
I have also added some commented code for handling the files after they have been uploaded in ajax_process.php
En Espanol
Al final fue PERL que no tenia permiso para cambiar el chown y chgrp del archivo que creo. La solucion fue pedir a mi web host remover 'suexec' - y asi PERL crea los archivos con chown y chgrp a 'nobody'. Ahora, PHP puede mover los imagenes.
Tambien he modificado el codigo en la pagina 'ajax_process.php' para mover a los archivos.
http://pastebin.com/858913 
Ed Ed 14/01/2007 a las 13:06
no he conseguido bajar el archivo zip!!
¿podias arreglarlo? por favor.
Muchas gracias.
Fran 15/01/2007 a las 00:44
I have this script working about half way and i need some advice from you guys.  I can upload a file, and the 4 files go into the tmp folder.  The progress bar does display but the file size and countdown do not appear.  But when the upload is "complete" it says "upload success".  Why doesnt the countdown appear?  Lastly, the files never get moved out of the tmp folder?  How do i get the tmp files to delete and actually have a useful file on the server?  Perhaps i missed some of this because i am not fluent in spanish.  If anyone can help it would be greatly appreciated. 
Bryan Bryan 17/01/2007 a las 04:06
i figured out what my problem was.  I did not have the proper permissions set on my tmp folder.  However, I am still missing something.  The 4 files in the tmp folder now get deleted, but i dont have the actual file on the server.  Can someone help me out in regards to what i am missing?
Bryan Bryan 20/01/2007 a las 19:14
Alguien pordria subir de nuevo el fichero:
http://www.mysharefile.com/v/1230849/upload_ajax_2.zip.html
Ya no esta disponible....en otro servidor GraciasChulo
Unxky28 31/01/2007 a las 18:17
Que paso el

Ejemplo en vivo


Podéis ver un ejemplo real en la URL http://www.obolog.com/upload.php
 Llorando Llorando Llorando Llorando Llorando Llorando NO FUNCIONA Llorando Llorando  Llorando Llorando  Llorando Llorando 
Juan Juan 16/02/2007 a las 04:20
Me he bajado el script y no consigo que funcione.. sale la barra de progreso con el "Cargando" pero no hace nada.. y en la demo de ésta web tampoco funciona.. ¿Que ocurre?
P.D. Gracias por el script..tiene muy buena pinta 
BrEaThE BrEaThE 21/02/2007 a las 19:41
Hola, a mi tampoco me funciona, sería de agradecer que el link que no funciona solucionara y si alguien lo tiene, que me lo pase y yo mismo lo colgare.





Un saludo  y gracias
Joan Joan 27/02/2007 a las 13:04
[...]}#headerimg h1 a, #headerimg h1 a:visited, #headerimg .description { color: #1F1F3F; }trydobeNeedle in the HayA PHP Upload with Status bar solution.Here is a PHP Upload with Status bar.View an ExampleBACKGROUND: When uploading large files to a website using a browser, the lack of an upload progress bar can be the reason that somebody might just quit using your site. The user shouldn’t have to be thinking, “How long do I have to wait? Is it even uploading?” When I decided to implement a an upload status bar for a PHP site, I thought it would be as easy as browsing for an already built utility and simply adding it to the site. I was discouraged to find out that PHP had no native support for gathering statistics on the file while in the process of being uploaded. After some research, I found that there are really only a two options to achieve an actual readout of file progress. Like many soluti[...]
[...]center; }#headerimg h1 a, #headerimg h1 a:visited, #headerimg .description { color: #1F1F3F; }trydobeby Jeremy DillA PHP Upload with Status bar solution.Here is a PHP Upload with Status bar.View an ExampleBACKGROUND: When uploading large files to a website using a browser, the lack of an upload progress bar can be the reason that somebody might just quit using your site. The user shouldn’t have to be thinking, “How long do I have to wait? Is it even uploading?” When I decided to implement a an upload status bar for a PHP site, I thought it would be as easy as browsing for an already built utility and simply adding it to the site. I was discouraged to find out that PHP had no native support for gathering statistics on the file while in the process of being uploaded. After some research, I found that there are really only a two options to ach[...]
el script no fuiona ayudame porfa
xavier xavier 07/05/2007 a las 05:05
excelente exemplo
Elder Elder 24/06/2007 a las 19:30
Tu ejemplo en vivo no me funciona! no se que pasa, estoy navegando con mozilla 2.0.06.
Al hacer el upload no pasa nada, solo sale la animacion AJAX y aqui se queda pegado. 
Hernan Hernan 23/08/2007 a las 16:15
mira el ejemplo esta bien pero cuando  envio el archivo me manda al cgi pero como hago par q vaya a la pagina que yo quiero...no se si me ntiendes 





<form id="file_upload" enctype="multipart/form-data" action="cgi-bin/upload.cgi?sid=<? echo $sid; 
javier javier 12/10/2007 a las 18:28
Pero pa mierda sirve este script que puso el webmaster, o por lo menos no en firefox.  Se queda pegado y nunca sube el archivo..
El Chanfle El Chanfle 30/10/2007 a las 23:26
[...]m/megaupload/" target="_blank" title="http://www.raditha.com/megaupload/" rel="nofollow">http://www.raditha.com/megaupload/ http://www.obokaman.com/p/descripcion-y-fuentes-del-upload-php-ajax-con-barra-de-progreso-1596 http://labs.beffa.org/w2box/demo/[...]
Alguien ha podido instalarlo sobre windows?



Por favor,  solicito ayuda.
Miguel 19/02/2008 a las 10:13
pa ni caca sirve esto
Scwq Scwq 26/04/2008 a las 00:23

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