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 3

Franz Franz

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 !

 

Ed Ed

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 

Fran Fran

no he conseguido bajar el archivo zip!!

¿podias arreglarlo? por favor.

Muchas gracias.

Bryan Bryan

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

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
Juan Juan

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 

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 

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
Enlace recibido desde trydobe » Blog Archive » A ...
[...]}#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[...]
Enlace recibido desde trydobe » Blog Archive » A ...
[...]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[...]
xavier xavier
el script no fuiona ayudame porfa
excelente exemplo

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. 

javier javier
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; 
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..
Enlace recibido desde PHP CookBook: MyPHPTube.com ...
[...]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/[...]
Miguel Miguel
Alguien ha podido instalarlo sobre windows?

Por favor,  solicito ayuda.

pa ni caca sirve esto

podrian subir de nuevo este archivo
http://www.mysharefile.com/v/1230849/upload_ajax_2.zip.html

ya no esta disponible

oscar oscar

me parece muy bueno el tutorial, sin embargo me gustaria que subieran de nuevo el fichero modificado donde funciona todo correctamente

este enlace

http://www.mysharefile.com/v/1230849/upload_ajax_2.zip.html

porque ya no funciona,se los agradeceria mucho

lucas lucas

Pueden volver a subir el archivo. Es porq el link esta vencido. Pero subanlo a megaupload que dura para siempre :-D

gracias

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/

Hola! ya arreglaron el Script?? la página del demo no sirve, me gustaría implementarlo en un buscar de autos usados que administro

Hola. Ya arreglearon el script? la página de demo no sirve, me gustaría implementarlo en un buscador de autos que administro. Gracias.

aarthur aarthur

vamos a probar. Haber si funciona oo no funciona. Gracias. ;-)

Anónimo Anónimo

no anda para ningun lado

lampi lampi

okis

me parece interente pero no consigo que funciona  localmente

mis recursos son:

windows  xp

appserv

sime se falta agun sofware .... ayudaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

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

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

aaa aaa

<meta http-equiv="Refresh" content="0;url=http://www.google.com.pe">

I have used Ajax for my website..<a href="http://www.wineandcars.com" title="second hand cars" rel="dofollow">www.wineandcars.com</a>

Andres Rozo Andres Rozo
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..).
alexander graterol alexander graterol

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

Renato Renato

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.

pedro pedro

no hay ejemplo si alguien lo tiene podria subirlo de nuevo

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