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

Muchas gracias Albert! That's a great piece of tool.
roger 24/03/2006 a las 07:41
BUeno, bueno... Felicidades! (auqn no me he enterado de res!) Pero Albert, ya sabes que tienes una cita conmigo... un punto más que se agrega a mi lista de NS/NC...:-) 
No Habla Espanol, but I really want to get this working on my site....when I test it out It just sits there....loading.
Tim 24/03/2006 a las 21:00
Majuki dixit: "Albert, ya sabes que tienes una cita conmigo..."
Sorprendido
EH EH!! què vol dir això? aqui hi ha tema i jo no m'he enterat? això no pot ser... Riendo
MeLeNaS 26/03/2006 a las 00:50
Hola, no hablo español así que esta traducción puede ser incorrecta. No puedo conseguir esta escritura para trabajar en mi Web site (http://watelevision.com/upload.php) que la escritura upload con éxito el archivo, pero nunca aparece en la carpeta del tmp y la barra del progreso no se mueve, él sigue siendo en blanco. ¡Por favor ayuda!
Smacca Smacca 02/04/2006 a las 19:56
en NeburX s'apunta a un bombardeig!! :P
MeLeNaS 07/04/2006 a las 17:43
Albert,Me parece excelente el script. El mejor de todos los que vi. El problema es que no logro que funcione. Cuando cargo archivos la barra no se completa y el archivo nunca llega. Disculpa la molestia, hay algo que me este olvidando? o el servidor requiere de alguna libreria en particular?Desde ya muchas gracias ! 
Alejandro Alejandro 08/04/2006 a las 00:10
Agh! Llevas toda la razón, Alejandro! El código es la adaptación del ejemplo que colgué, y precisamente en ese ejemplo, para no saturar el servidor, simplemente no hacía nada con los archivos subidos, se quedaban en la carpeta temporal...Así pues, para conseguir que el script termine de ser funcional, y poder trabajar con los archivos, faltaría mover los temporales a una carpeta de trabajo. Eso se podría hacer tanto directamente desde el CGI, o mediante un script PHP al que redireccionara éste. Espero poder subir el script modificado en un par de días. Os informaré con un comentario en cuanto lo haya actualizado.Siento el descuido! Avergonzado
Muy bueno! felicidades, me gustaría contactar contigo para hablar sobre un proyecto de web, estoy buscando un programador joven, innovador, amante de internet y arriesgado.Si te sientes identificado, será un placer conocerte, ups, he escrit en castella, soc de Manresa ;-) 
Joan Planas Joan Planas 10/04/2006 a las 03:26
Muy interesante tu articulo, yo tenia tambien esa idea de cargar archivos mediante ajax. Lo intente personalmente siguiendo un ejemplo de registro de datos mediante ajax, pero no pude, pero con este codigo vere si puedo implementarlo en mi web, la cual estoy actualizando. GRacias
Jesus Jesus 11/04/2006 a las 20:07
¿Cuando queda pronta la modificación del script? Veo que los post llegan hasta el 11/04/06 y aún no hay nada..... es que la ansiedad dejo de ser un valor?
Alfredo Alfredo 18/04/2006 a las 06:20
Disculpad la tardanza... Hace algo más de una semana me trasladé al nuevo piso, y aún no tengo internet allí. Si los operadores de Jazztel no me han mentido... en unas dos semanas habrán llevado a cabo la portabilidad y la activación de la línea, así que para entonces, podré colgar los cambios. Mientras tanto... sólo puedo conectar desde el trabajo. Triste
Ola! Adorei seu script, mas estou um problema. Tudo funciona perfeitamente, mas para onde vao meus arquivos no servidor ?Muito obrigado, se puder responder no meu email, ou no meu msn: fabricio_massula@hotmail.comObrigado Guiño
fabricio fabricio 18/04/2006 a las 23:51
Ok, esperemos que pronto se solucione tu conexión y confiemos hmmm en los operadores de Jazztel que si son igual a los servicios uruguayos estamos en problema. En lo posible avisa de alguna forma que se realizó la modificación. Gracias por tu tiempo y por compartir tus ideas.
Alfredo Alfredo 25/04/2006 a las 21:09
Buenismo, mira gracias !
Lo baje de nuevo y anda perfecto. Que tendria que modificar para recuperar los archivos que subo? o sea, moverlos a una carpeta
Alejandro 30/04/2006 a las 20:57
Epale!!! está súper tu explicación!(Y)Chulo
Martin González Martin González 20/05/2006 a las 18:01
Que tal men, hace unos dias curiosiando por la red me encontre tu script y mi reaccion fue como si hubiera encontrado el santo grial jejejeje  en pocas alabras: esta muy bueno el script, Chulo pero no seas malo sube el script funcional
Josue Ramirez Josue Ramirez 23/05/2006 a las 04:36
Hola que tal,Estoy impresionado por las posibilidades de AJAX, pero he tratado de instalar el script en mi servidor y no consigo que haga nada. Se queda "cargando..." y no hace nada.  Es muy posible que haya cometido algún fallo al instalarlo, por lo que cualquier ayuda será bienvenida. La estructura del servidor es similar a la de todos /var/www/vhosts/dominio.com/cgi-bin /var/www/vhosts/dominio.com/httpdocs /var/www/vhosts/dominio.com/tmp... En el archivo ajax_process.php que debería poner aquí:<?
// Put here the same folder that in CGI
define ( "TEMP_DIR", $_SERVER['DOCUMENT_ROOT']."/tmp/" );
//---------------->y en upload.cgi# variable values. This folder will host the raw post data during the upload.$tmp_dir="/var/www/vhosts/obolog.com/httpdocs/tmp";
Saludos
Saludos
Miguel 25/05/2006 a las 18:14
Soy yo otra vez,Ya he conseguido que funcione. Está muy bien.
Miguel 26/05/2006 a las 12:58
Como lo has conseguido?
MMy MMy 29/05/2006 a las 18:43
Riendo ¡Eureka! conseguí que funcione este script, aún me falta aprolijarlo un poco pero copia bien los archivos enviados al temp. No es tan fácil para explicarlo aquí ya que faltan unas cuantas líneas en diversas partes Después cuando este pronto les paso un enlace.
Alfredo Alfredo 31/05/2006 a las 21:07
A MI NO ME HACE EL LENGTH
PARA ALFREDO 09/06/2006 a las 22:17
Entiendo por "length" tal vez la barra de progreso, eso puede ser porque estas ejecutando "upload.php" desde un directiorio sin ser el raíz.. entonces necesitas en el "<form" de este archivo colocar en la parte de action: action="/cgi-bin .... una barra inclinada para decirle que esta desde el raíz. Me atraso un poco en mandar la solución porque debo entregar un trabajo para el lunes 12. La solución si alguien quiere maltratarse un poco está bajando el megaupload y ver el archivo llamado upload2.php, entonces suben ese archivo también y en upload.php después de $("#ok_status").show(); colocan abajo:
self.location.href ='upload2.php?sid=<?=$sid?>';
esto redirije al upload2.php luego de subido el archivo pero antes deben sacar de ajax_upload.php las 4 líneas que hay como estas:
unlink(TEMP_DIR.$_REQUEST["sid"]."_signal");
ya que upload2.php toma esos archivos que se borran con unlink y estos archivos son muy importantes porque contienen la info de los archivos subidos para dividirlos del temp original creado al subir, luego si se quiere al final del upload2.php se pueden borrar con las líneas esas de unlink que eliminaron de archivo ajax. Recuerden que en upload2.php hay una línea que mueve los archivos...algo así:
rename($file['tmp_name'][$i], aquí_el_directorio_y_el_nuevo_nombre_del_archivo);
Pueden crear algo con ese bucle o el nombre original deberían sacarlo con un "explode" ya que sino da error c:\\directorio\\1.jpg por algo así, entonces con explode:
$archtemp=explode('\\',$file['tmp_name'][$i]);  
y agregan:
$cuento=count($archtemp);
    if ($cuento>0)
    { $archivo=$archtemp($cuento-1); }
    else
    $archivo=$archtemp;
    $archivo=str_replace(' ','_',$archivo);
medio rebuscando... aun no lo probe. Espero que alguien de esta forma pueda hacerlo andar, de lo contrario hay que esperar hasta que me vea libre... de mis responsabilidades... ¡suerte!
Alfredo Alfredo 10/06/2006 a las 00:47
¡Me aburrí!, me tome un tiempito y lo modifiqué, en cada archivo puse un comentario así es más fácil que ande. El enlace demora unos segundos para permitir la descarga, luego aparece:Click here to download file.
http://www.mysharefile.com/v/f4rwrn0b/upload_ajax.zip.html
Los créditos son para Albert García, claro está, lo mío es solo un retoquesito.
Alfredo 10/06/2006 a las 01:39
Cuidado, acá mando otra vez el archivo zip, ya que el anterior dentro de upload2.php no tenía los unlink para eliminar los archivos temporales una vez subidos, ahora los borra. Aquí el archivo modificado:
http://www.mysharefile.com/v/1230849/upload_ajax_2.zip.html
Eso es todo, espero que ande bien, luego sería una buena idea renombrar el archivo upload.cgi por un nombre raro tipo up_ajax_pro.cgi y en upload.php luego cambiar el <form... con el nuevo nombre por un tema de seguridad... me puse paranoico.
Alfredo 10/06/2006 a las 02:32
En efecto, como habían comentado por ahí arriba, el script estaba incompleto, puesto que sólo controlaba la carga del archivo, no trataba los archivos subidos, ni los copiaba a ninguna parte. Esto fué debido a que usé como modelo el propio experimento que usaba en esta misma web, donde simplemente realizo el control de upload, para luego eliminar los archivos de control ( _qstring, _flenght, _signal... ), y dejar los archivos subidos en el temporal, donde son eliminados periódicamente.  Para conseguir la completa funcionalidad del script basta con añadir un print "location:%url_del_script%" al final del CGI, especificando el URL del script que tratará el upload, como si de un upload simple de PHP se tratara. He modificado el script subido para incorporar este cambio.Recordad, como también os han apuntado por ahí arriba, que es importante que tengáis en cuenta las rutas a los archivos ( relativas, absolutas... )cuando configuréis los scripts.Aclaración: los archivos *_qstring, *_flenght, *_signal... SÍ deben borrarse al finalizar el upload, puesto que sólo sirven para que el control AJAX pueda ir midiendo el progreso de la carga. No son realmente los archivos subidos, si no los datos en bruto del envío POST.
Un saludo y disculpad la demora. ;) 
Muy bueno el script felicidades....
de Cbba-Bolivia
Delia Delia 14/06/2006 a las 18:21
Hola!
I've got (hopefully) small problem with this script. After clicking on SEND button i get progress bar, but nothing happens. It continously sends POST data to ajax_process.php, but there's no response. In apache error log i get: "Premature end of script headers: /home/user/public_html/ajax_upload_test/cgi-bin". What does it mean? Maybe i have something wrong with permissions, but i've set 755 everywhere and it still doesn't work.
g0nzo 18/06/2006 a las 12:52

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