Gracias a la combinación de HTML y Javascript por el lado del cliente y de PHP con Perl por el lado del servidor hemos puesto en marcha un ejemplo muy deseado por desarrolladores de páginas Web. Un cargador de archivos con barra de progreso interactiva.
El ejemplo muestra como subir archivos al servidor mostrando a la vez el progreso de carga en tanto por ciento.
Para este ejemplo hemos utilizado las siguientes tecnologías: Por un lado Ajax, que permite que las páginas Web se comuniquen con el servidor sin necesidad de actualizar por completo la página, por otro lado Perl, utilizando la interfaz de entrada común (CGI) y por último un script en PHP.
Gracias a esta combinación podemos conseguir interactividad en la barra de progreso y mostrar en todo momento cual es el porcentaje completado mientras se sube un archivo.
Si analizamos el archivo principal “index.php” podemos ver el formulario html para subir el archivo y código en javascript que permite hacer consultas al servidor mediante ajax para calcular el progreso de subida:
<form id=¨forumlario¨ enctype=¨multipart/form-data¨ method=¨post¨ target=¨_self¨>
<div id=¨caja¨>
<input type=¨file¨ name=¨archivo¨ id=¨archivo¨ />
<input type=¨button¨ name=¨boton¨ value=¨Enviar¨ onClick=¨
subirArchivo ()¨/>
<div id=¨barra¨>
<div id=¨por¨></div>
</div>
</div>
</form>
Como vemos es un formulario bastante simple para enviar archivos pero con dos peculiaridades, el tipo de “target” del form, que tiene que ser “_self” y el tipo de botón que en lugar de ser un “submit”, lo que hara será ejecutar una función en javascript, “subirArchivo()”
Si miramos la función de javascript “subirArchivo()”
function subirArchivo (){
var nombre_path = document.
getElementById (¨archivo¨).value.
split (¨¨);
barra = document.
getElementById (¨por¨);
nombre_archivo = nombre_path[nombre_path.length-1];
var extension_archivo = nombre_archivo.
split (¨.¨);
var extension = extension_archivo[extension_archivo.length-1];
if ( !extension.
match (/(jpg)|(jpeg)|(gif)|(png)|(zip)/) ){
alert ( ¨Sólo se permite subir imágenes: jpg, gif, png y zip¨ );
return false;
}
url = ¨proceso.php¨;
paramentros = ¨id_archivo=¨+nombre_archivo;
tipo_contenido = ¨application/x-www-form-urlencoded¨;
metodo = ¨post¨;
document.forms[0].action = ¨
http://www.Codigo-fuente.com/cgi-bin/upload.cgi?id= ¨+nombre_archivo;
document.forms[0].
submit ();
setTimeout (¨
enviarPeticion ()¨,100);
}
La primera instrucción que realizamos es limpiar la ruta del archivo, ya que sólo nos interesa el nombre del archivo.
Luego comprobamos con una expresión regular si la extensión del archivo está permitida.
Una vez esto lo que hacemos es darle valores a nuestras variables globales para poder hacer la petición en Ajax:
Por último enviamos el formulario y ejecutamos la función “enviarPetición()”
Como he dicho antes el formulario ya se está enviando, es decir el archivo se está enviando al script “upload.cgi”, que es el encargado de escribir el archivo al servidor, este proceso puede tardar varios minutos dependiendo del tamaño del archivo, ancho de banda, etc.
Gracias al target del formulario, “_self” la página no se cambiará hasta que el proceso de subida no haya terminado, lo cual nos permite ejecutar la función “enviarPetición()” ya que ésta irá comprobando mediante el uso de Ajax, el progreso de la subida.
Si observamos la función “enviarPeticion()”
function enviarPeticion (){
// Obtenemos nuestro objeto XMLHttp
obcxm = crearXMLHTTP ();
// Abrimos la conexión
obcxm.open (metodo, url, true);
obcxm.setRequestHeader (´Content-Type´, tipo_contenido);
// Mientras hayan cambios de estado ejecutamos la función estadoPeticion ()
obcxm.onreadystatechange = estadoPeticion;
// Le pasamos los parametros anteriormente declarados
obcxm.send (paramentros);
}
Lo que hace es crear el objeto para la petición en ajax, e indicar al objeto que se ejecute la función “estadoPeticion()” mientras se generen cambios.
La función “estadPeticion()” es la siguiente:
function estadoPeticion (){
if (obcxm.readyState == 4){
if (obcxm.status == 200){
if (obcxm.responseText!=¨100¨){
barra.innerHTML = obcxm.responseText + ¨%¨;
// Mientras no haya llegado al 100 ejecutamos la función enviarPeticion () para saber su estado
setTimeout (¨enviarPeticion ()¨,100);
// Enviamos el tanto por ciento para pintar la barra
barraProgreso (obcxm.responseText);
}
}
}
}
Básicamente esta función recoge un valor numérico, el tanto por ciento, que pinta el script php “proceso.php”, este script lo llamamos mientras no haya devuelto el 100.
Seguidamente le pasamos el valor recogido a la función “barraProgreso(var valor)”
function barraProgreso (porcentaje){
// Pintamos la barra incrementando el width
barra.style[¨width¨]=porcentaje+¨%¨;
}
Como podemos ver lo que hace es agrandar el ancho de la barra, para dar sensación que la barra de carga aumenta.
El resto de archivos están muy bien comentados, lo podéis descargar el archivo más bajo, y en caso de dudas no olvidéis de comentarlo.
Un Saludo, espero que os sirva.
Podéis dirigiros al foro, en el que encotraréis ayuda para hacer la instalación, en el siguiente link:
http://www.Codigo-fuente.com/foros/viewtopic.php?f=2&t=2
DESCARGAR CODIGO FUENTE
http://www.Codigo-fuente.com/wp-content/plugins/download-monitor/download.php?id=1 
Por sereno
