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.
- Deja tu comentario (136)




Comentarios sobre Descripción y fuentes del upload PHP + AJAX con barra de progreso - página 3
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 !
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
no he conseguido bajar el archivo zip!!
¿podias arreglarlo? por favor.
Muchas gracias.
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.
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 GraciasQue paso el
Ejemplo en vivo
Podéis ver un ejemplo real en la URL http://www.obolog.com/upload.php
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
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.
<form id="file_upload" enctype="multipart/form-data" action="cgi-bin/upload.cgi?sid=<? echo $sid;
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
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
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.
vamos a probar. Haber si funciona oo no funciona. Gracias. ;-)
no anda para ningun lado
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
<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>
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
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.
no hay ejemplo si alguien lo tiene podria subirlo de nuevo