Este artículo es la traducción de PHP AJAX File Upload Progress Meter Updates

Durante el fin de semana mi código de medidor de uploads de archivos tuvo mucho tráfico. Parece que está en la lista de populares de del.icio.us y también está obteniendo un montón de votos en digg. Para celebrar esto actualicé el código.

La nueva característica más importante es que devuelve información sin tener que parchear PHP. Ahora la versión parcheada te da mas información como velocidad de subida y tiempo estimado de finalización. Pero igual damos devolución al usuario sin usarlo.

También creé algunas páginas wiki para empezar el proceso de documentación.

Acá están los demos: Con el Parche y la extensión
Sin el parche
Para tener la velocidad de subida vas a necesitar descargar e instalar el parche y extensión PHP Upload Progress.

Si queres usar el código necesitas:

• Instalar HTML_AJAX (pear install HTML_AJAX-alpha)
• Descargar PAFUPMU e instalarlo en algún lugar accesible.
• Agregar el código a tu página usando demo.php como un ejemplo.

La forma básica en que trabaja el código es: tomamos un formulario que contiene un upload de archivo y un aceptar con el objetivo (target) en un iframe oculto. Hacer esto permite que la subida pase en el fondo. Entonces consultamos al servidor en lapsos regulares (digamos intervalos de 2 segundos) preguntando para actualizar el estado. Si tenés el parche+extensión instalado te da la velocidad de subida del archivo, etc. Si no tenés la extensión detenemos las llamadas AJAX y solo animamos la barra de estado hasta que la subida termine en el iframe y nos lo informe.

En demo.php nos encargamos de generar la página vigente y manejamos la subida en la misma página. Entonces empezamos manejando la actualización.

include ‘UploadProgressMeter.class.php’;

if ($fileWidget->uploadComplete()) {
// output javascript to the iframe to send a final status to the main window
// this will catch error conditions
echo $fileWidget->finalStatus();

// move the file(s) where they need to go
exit;
}

Este código solo funciona cuando estas subiendo por eso no veras nunca una salida de él. Esto puede hacer el seguimiento de errores algo problematico. Por otro lado se puede resolver haciendo visible el iframe. Luego montas el Javascript necesario, primero HTML_AJAX y después los subidores JS.

<script src="http://cabezaderaton.com.ar/wp-admin/%C3%A2%E2%82%AC%E2%84%A2demoserver.php?client=main,request,httpclient,dispatcher,json,util%C3%A2%E2%82%AC%E2%84%A2" type="’text/javascript’"> </script>

<script src="http://cabezaderaton.com.ar/wp-admin/%C3%A2%E2%82%AC%E2%84%A2demoserver.php?stub=UploadProgressMeterStatus%C3%A2%E2%82%AC%E2%84%A2" type="’text/javascript’"></script>
&lt; ?php echo $fileWidget-&gt;renderIncludeJs(); ?&gt;

demoserver.php está incluido en la fuente, puede ser que quieras nombrarle algo más, si realmente usas este código. Es solo una página usando HTML_AJAX_Server para registrar la clase UploadProgressMeterStatus.
También necesitás algo de CSS para darle estilo a la barra de progreso. Lo único importante es que .progressBar y .progressBar.bar estén posicionadas relativamente.

.progressBar {
position: relative;
padding: 2px;
width: 300px;
height: 40px;
font-size: 14px;
}

.progressBar .background {
border: solid 1px black;
width: 270px;
height: 20px;
}

.progressBar .bar {
position: relative;
background-color: blue;
width: 0px;
height: 20px;
}

Finalmente termina las cosas construyendo un formulario. Fijate que podés incluir otros elementos en el formulario, pero si necesitan producir una salida vas a tenés que manejar retrollamadas (callback) en la página padre desde la salida del iframe.

<form action="demo.php">
</form> 		enctype="multipart/form-data"
method="post" renderFormExtra(); ?&gt;&gt;	renderHidden(); ?&gt;

<label>Select File: </label>

render(); ?&gt;
renderProgressBar(); ?&gt;