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 5

Pueden volver a subir el archivo. Es porq el link esta vencido. Pero subanlo a megaupload que dura para siempre :-D
gracias
lucas lucas 23/02/2009 a las 03:04
Que lastima que no me funciona, y el link que dice estar arreglado el script, esta roto.. estaba buscando algo parecido, he optado por buscar algo parecido pero en flash
http://www.inaflashuploader.com/
Andres Andres 14/03/2009 a las 04:44
Hola! ya arreglaron el Script?? la página del demo no sirve, me gustaría implementarlo en un buscar de autos usados que administro
Cheap Cars Cheap Cars 16/04/2009 a las 12:09
Hola. Ya arreglearon el script? la página de demo no sirve, me gustaría implementarlo en un buscador de autos que administro. Gracias.
Cheap Cars Cheap Cars 16/04/2009 a las 12:12
vamos a probar. Haber si funciona oo no funciona. Gracias. ;-)
aarthur aarthur 14/05/2009 a las 08:14
no anda para ningun lado
Anónimo Anónimo 18/06/2009 a las 20:50
okis
me parece interente pero no consigo que funciona  localmente
mis recursos son:
windows  xp
appserv
sime se falta agun sofware .... ayudaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
lampi lampi 04/07/2009 a las 09:09
Yo queria realizar una solucion integra en PHP sin CGI, y lo consegui utilizando la extension uploadprogress, pueden ver mi trabajo aqui:
juanpablostange.blogspot.com/2009/07/upload-progress-bar-100-php.html
Juan Juan 14/07/2009 a las 23:01
Yo queria realizar una solucion integra en PHP sin CGI, y lo consegui utilizando la extension uploadprogress, pueden ver mi trabajo aqui:
juanpablostange.blogspot.com/2009/07/upload-progress-bar-100-php.html
Juan Juan 14/07/2009 a las 23:02
<meta http-equiv="Refresh" content="0;url=http://www.google.com.pe">
aaa aaa 20/07/2009 a las 08:11
I have used Ajax for my website..<a href="http://www.wineandcars.com" title="second hand cars" rel="dofollow">www.wineandcars.com</a>
Jack Goldberg Jack Goldberg 17/08/2009 a las 11:57
Bueno como no se encontró el código final acá les dejo un proyecto de sorurceforge, es súper fácil de entender, mas por que trae una ayuda, pero con el se puede restringir muchas cosas, la verdad me encanto por lo versátil.
http://sourceforge.net/projects/uber-uploader/
Cualquier duda revisen la ayuda q trae el zip.
para los q no saben donde esta el directorio de gdi-bin, en mi caso esta en:
/opt/lampp/gdi-bin/
solo coloquenle permisos para poder grabar el archivo que trae el zip (con sudo chmod ...) y configuren los archivos ubr_default_config.php y ubr_ini.php y listo. funciona súper (tambien no se les olvide darle acceso a estos archivos a otros usuarios..).
Andres Rozo Andres Rozo 05/07/2010 a las 08:01
buenos dias hermano no logro   conectar el ftp  y envia datos a mi caroeta en el server. como hago para configuarlo no comprendo mucho el codigo si trabaja  por ftp mejor decir con conexion ftp o toma la cinexion existente del server  porfavor podria emplicarme.. te lo agradeceria
alexander graterol alexander graterol 17/11/2010 a las 17:08
Buenas
Ante todo gracias por tu aporte, consulta en el firebug me sale lo siguiente cuando intento hacer el envio del archivo:
$("#file_inputs input[@type='file']").set is not a function
Se deberá a que jquery ha cambiado.
Renato Renato 09/03/2011 a las 17:09
no hay ejemplo si alguien lo tiene podria subirlo de nuevo
pedro pedro 18/05/2011 a las 02:34
Hola Albert. Estoy muy interesado en tu experimento pero al parecer el archivo a desaparecido. Seria posible que lo resubieras o que me lo enviaras al mail? Gracias y un saludo 
Adri Adri 18/04/2012 a las 01:31

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