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 2

Thanks!
Finally i fixed the progress bar (however i don't know really how :) ).
2 question though:
- to save uploaded files can i use something like this:
foreach($_FILES as $file) {
move_uploaded_file($file['tmp_name'], $file['name']);
}?
It doesn't work, that's why i'm asking :) I'm not php programmer, i'm doing it for my friend and he wants me to show him "complete" solution...
- can it work with thickbox? i mean non-thickbox version is working (at least the progress bar :)) and thickbox version is not. there's exactly the same problem i had before with the progress bar...
Cheers,
g0nzo
g0nzo 19/06/2006 a las 21:46
This script is great and I have manipulated it to upload files. The only problem is that this upload progress bar is great for small files only. It seems anything over 15MB and the upload.cgi times out. Any suggestions on why this is timing out?  TIA Riendo
ricbax ricbax 24/06/2006 a las 03:04
estimado amigo , esta muy interesante su codigo , pero no tendras cuando subes esta smultiples imagenes te pueda cortar en pequeñas imagenes, y asu ves mantengan las originales en su tamaño. atte. Gracias por tu respuesta Riendo
pierre pierre 27/06/2006 a las 22:54
Hola a todos Necesito un favor LlorandoNecesito hacer que varios usuarios puedan subir y bajar archivos por ejemplo de imagenes desde una web, es decir que un usuario "x" suba un archivo 1.jpg y que otro usuario "Z" le guste ese archivo y lo baje, es decir una carpeta en  donde se puedan alojar archivos de imagenes, que esten al acceso de los usuarios, que puedan subir y bajarlos cuando quieran, buscarlos, etc... AvergonzadoPor favor si alguien me puede dar una mano en esto.... si me pueden pasar los script, un ejemplo, se los agradecería mucho...saludos Karina
karina karina 30/06/2006 a las 03:10
Hola Karina, me encuentro en tu misma situación y tengo varias dudas:1- Para que funcione AJAX es necesario instalar algún interprete en el servidor? Tengo entendido que se basa en JavaScript, por lo que no lo tengo muy claro.2- El megaupload funciona sin AJAX?3- Si AJAX es obligatorio, conocen algún otro fichero PHP, Perl, JS o HTM para subir archivos a un servidor? No es imprescindible que muestre la barra de progreso.4- Supone algún riesgo para el servidor el uso de su script? Me gustaria limitar por ejemplo el tamaño y las extensiones para los ficheros que se suban al servidor. Las extensiones se pueden configurar fácilmente en la página upload.php pero no se si esto es suficiente o si hay que modificar algún documento más.Nada más por mi parte, muchísimas gracias por compartir su trabajo y por su ayuda. Un cordial saludo.
e1kio e1kio 03/07/2006 a las 23:09
Alfredo,No consigo que funcione tu ejemplo.Los 4 archivos temporales que se copin en tmp_upload se generan correctamente, pero despues no soy capaz de copiar el archivo al directorio definitivo. Me podrías ayudar?Gracias
Miguel 04/07/2006 a las 17:35
muy bueno exelente !!
Dante 07/07/2006 a las 15:04
Hola, estuve viendo el script y funciona muy bien sólo que algunas veces el script genera un error de permisos entre el CGI y el PHP ya que el php muchas veces no puede acceder directamente a la carpeta de temporales si no ha sido el mismo script quien lo hacreado. Estuve intentando mover los archivos desde perl pero mis conocimentos en perl son pocos.Quisiera preguntar si alguien sabe como se interpreta el siguiente comando que existe en el javasscript  $("#Submit").set("disabled","disabled"); (realmente no se que es el $('#elemento'). blabla).Desde ya muchas gracias y el script funciona de maravillas.Saludos 
Enrique Enrique 08/07/2006 a las 17:27
Miguel, no sé cual es tu problema al copiar los archivos al nuevo dir, o que error te genera el código.
Joel, tal vez sería bueno que pruebes el script desde un hosting linux real.
Enrique, eso es para habilitar o deshabilitar el botón de subida cuando por lo menos tenés un archivo ya seleccionado.
Karina, eso que pedís al igual que alguien que dijo por allí de subir fotos y al mismo tiempo crear una miniatura es bastante complejo y al mismo tiempo muy personalizado a cada proyecto, se hace imposible desde aquí informar algo así.
Alfredo 08/07/2006 a las 23:27
Me aconsejas alguno alfredo que sea gratuito es solo para probarlo y modificarlo es que yo mas adelante en septiembre comprare uno en Aruba pero mientras tanto quiero crear todo el sistema.
Joel Joel 09/07/2006 a las 00:47
Enrique, esto es para ti:$("#Submit").set("disabled","disabled"); eso es una sentencia creada a partir de la librería jquery que en su nueva versión beta sería <<jQuery("#Submit").set("disabled","disabled"); >> pero seguirá siendo funcional la forma que nos presentas. Paso a explicartelo$() es una funcion que nos devuelve un array de objetos que cumplan una serie de requisitos, los requisitos son los que se encuentran dentro de los (), por ejemplo #Submit que indica todos los objetos que tengan como id "Submit", si se hubiese puesto ".Submit" habrían sido todos los elementos con la clase css "Submit", o si se quisiese indicar todos los input del tipo submit: 'input[@type="submit"]'el .set es otra función, sí como lees, es que jQuery implementa la concatenación de funciones y se pueden usar funciones sobre los objetos devueltos por las anteriores funciones..set lo que hace es establecer un parámetro o atributo de objeto a lo que se le diga, es decir, .set("disabled","disabled") establece el parametro disabled a disabled, sería como tener esto:<input type="submit" id="Submit" value="Enviar">y tras interpretarse el javascript quedase algo como<input type="submit" id="Submit" value="Enviar" disabled="disabled">Para aprender mas de jQuery te aconsejo que te documentes tanto en la pagina oficial como en tantas otras que hay sobre la librería.Un saludo
Trystan4861 Trystan4861 11/07/2006 a las 14:58
Alfredo gracias por responder. El problema es que en tu ejemplo aparece una carpeta "uploads" donde se supone que el script upload2.php debería copiar el archivo, borrando a su vez los temporales creados. A mi me borra los temporales perfectamente, pero en la carpeta uploads no se copia nada (por supuesto tengo permiso 777 para esa carpeta).Un saludo
Miguel 11/07/2006 a las 16:09
Muy bueno tu codigo man, pero tengo un pequeño problemita ... y es que yo lo que necesito es poder subir un zip, modifico la funcion javascript que verifica la extension y deja de funcionar .... te pego el codigo:if ( false != elem )
        {
            filepath = elem.value.split("\\");
            filename = filepath[filepath.length-1];
            extensionpath = filename.split(".");
            extension = extensionpath[extensionpath.length-1];
             /*if( !extension.match(/(jpg)|(jpeg)/) )
            {
                alert ( "Sólo se permite subir imágenes: jpg." );
                return false;
            }*/
            $(elem).hide();
            $("#file_list").append("<li style='display:none'>&bull; "+filename+" <a xhref='javascript:;' onclick='delFile(this,"+($("#file_list li").size()+1)+")' style='color:red'>[x]</small></a></li>\n");
            $("#file_list li:last").slideDown("slow");
        }

Espero que alguien me pueda ayudar, muchas gracias ^^
Oscar Oscar 13/07/2006 a las 10:01
Hola, me parece super bueno este script. Lo que pasa es que yo voy un poco pez en esto Triste y me gustaria saber dos cosillas.1. se puede ejecutar este script en cualquier ordendor? no es necesario tener linux, verdad?2. Hay que configurar algún parámetro o algo? es que no me funciona, aparece la barra de estado de la descarga, pero ya esta, no se completa ni nada.Os agradezco un montón la ayuda.
Sonia Sonia 13/07/2006 a las 11:17
Hola a todos, ante todo enhorabuena por la aplicacion es muy interesante. yo he estado dandole vueltas , y mi problema es que no se donde se alojan los archivos... dado que solo se fragmentan en el temporal y despues, se borran con el unlink...pero, no consigo saber donde se suben , es mas no consigo saber que lineas tocar para poder cambiar el directorio donde se suban los archivos.Para aquellos que solo vean la barra de descarga pero esta no se inicie, probad a desabilitar cualquier antivirus o firewall que tengais, basicamente por que AJAX utiliza puertos que podeis tener cerrado.Un saludo
Juanra Juanra 13/07/2006 a las 13:20
Ya solucione el error era que el script cgi en concreto no tenia 755 ahora me va de perla lo modificare un poco par ael sistema que estoy haciendo muchas gracias.
Joel 13/07/2006 a las 15:05
Hola gente, me parece muy bueno el script pero no logro probarlo en mi hosting. La barra de progreso no avanza... El cgi tiene permisos 755 el temp dir creo haberlo puesto bien /home/.../public_html/tmp_upload pero no doy con mi error... Si alguien me puede orientar se lo agradeceria ya que necesitaría algo asi. Luego si puedo correrlo en mi hosting necesitaré que me aclaren otras dudas.Gracias
Yiyo Yiyo 14/07/2006 a las 22:59
Alfredo, tengo una dudaEn el archivo upload2.php aparece la siguiente línearename($file['tmp_name'][$i], 'uploads/'.$archivo);La variable $file['tmp_name'][$i], se supone que es donde se ha copiado el archivo "temporalmente", que supongo será el directorio temporal del servidor (distinto a /tmp_upload que es donde se copian los temporales postdata,flength,signal,qstring).Suponiendo que esto que digo es cierto, como copio el archivo temporal al directorio uploads, ya que diche línea parece no hacer nada.rename($file['tmp_name'][$i], 'uploads/'.$archivo);Saludos
Miguel 17/07/2006 a las 16:22
Miguel, vi tu ejemplo en el server y creo que funciona bien, al menos no hay mensajes de error.
Alfredo 23/07/2006 a las 02:34
Hola, primero k todo muchas gracias, se ve muy interesante y util este sistema.Quisiera preguntarte si tambien funciona con ASP o solo contiene comandos para PHP. Gracias
vicman 25/07/2006 a las 17:37
Hola, como muchos en este blog tengo el problema de que la progress bar no se mueve y el file upload no se realiza. Existe un zip que contenga la version final para poder usar tal como se demuestra en http://www.obolog.com/upload.php ?Muchas gracias por su tiempo y agradezco su ayuda 
Ariel Ariel 26/07/2006 a las 23:26
ey yo tengo el play y nesesito que me digan si al play le puedo poner dvds gravados mil piratas por favor poner noticia aqui
jasdevildeil85 29/07/2006 a las 22:26
Ariel, estoy en tu misma situación aunque yo he conseguido que se mueva la progress bar no consigo que el archivo se copie al directorio. Si pudieran tener la versión final sería de gran ayuda. Gracias a todos por hacer esto posible.
Miguel 03/08/2006 a las 18:34
MIGUEL, yo al contrario tuyo he logrado subir el archivo, pero no hacer correr la progress bar. Enviame un correo con lo que hiciste tu, yo me encargo de arreglar lo que me falta y publicar el codigo en mi server para que lo bajen los demas.Mi msn, arrobared@hotmail.com

PD: Gracias Obokaman por tu ayuda!
Miguel Miguel 04/08/2006 a las 01:59
Hola a todos/as¿ Alguien sabe como se puede limitar el tamaño máximo del archivo? Efectivamente el upload.cgi tiene una variable con la que se limita, pero al ejecutar el script no aparece ningún mensaje de alerta y aparece continuamente "cargando..." Más concretamente la funcion bye_bye no parece hacer nada. Un saludo
Miguel 22/08/2006 a las 14:18

Al fin, puedo ejecutar el script, pero no en mi hosting. En mi hosting el log de errores me arroja:

[22-Aug-2006 14:15:35] PHP Fatal error: Cannot redeclare class xmlwriter in /home/cristali/public_html/xml.class.php on line 61 

Esta todo igual en los dos hosting, los permisos, los path de acceso, pero no logro que en mi hosting se ejecute el script, se suben los archivos a la carpeta tmp, pero ahí quedan. 

Espero que alguien me pueda orientar porque en un host puedo ejecutarlo y en el mió no. 

Gracias.

Felipe Felipe 22/08/2006 a las 20:20
Hola Felipe, posiblemente no puedas ejecutarlo por la versión de PHP que está corriendo. Creo que el nombre de la clase XMLwriter entra en conflicto con alguna función reservada de PHP5. Prueba a cambiar el nombre a la clase, tanto en su definición como en todos los lugares donde se instancie, y debería funcionarte correctamente. Cambiale el nombre a, por ejemplo, XMLPusher, y me cuentas.Un saludo! 

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