Ene 172013
 
Artículo Javascript

En este artículo vamos a comentar la manera de utilizar la librería javascrit plupload en un formulario de envío de imágenes a un servidor web.

La principal ventaja de plupload es que permite procesar la imagen en el mismo cliente, reduciendo el volumen de datos a enviar al servidor. Esto es especialmente interesante en aplicaciones dirigidas a dispositivos móviles, para permitir al usuario, por ejemplo, enviar al servidor las fotografías tomadas con la cámara incorporada. Una imagen de este tipo puede ocupar varios MB, y tiene una resolución que normalmente es excesiva para su presentación en una página web. Con plupload, es posible cambiar la escala, y opcionalmente la calidad de la imagen, para reducir su tamaño en más de un 90%.

Por otra parte, plupload utiliza el mecanismo que esté disponible en el dispositivo para realizar este procesamiento: html5, flash, gears, silverlight o browserplus, por lo que es compatible casi con cualquier tipo de cliente que lo utilice.

Por estas razones, plupload ha sido adoptado por numerosas plataformas CMS, entre las que destaca WordPress, para implementar la funcionalidad de envío de imágenes al servidor.

Instalación de plupload

Accediendo al sitio web de plupload, realizamos la descarga del paquete de instalación. En nuestro caso, el fichero se llama plupload_1_5_4.zip y ocupa 240 KB. Al descomprimirlo en la raíz de nuestro servidor web, crea un directorio “plupload”. Bajo este directorio se encuentra el subdirectorio “js” que contiene los scripts de la librería, ademas de otros directorios con documentación y ejemplos.

Formulario de envío de imágenes

En el sitio web de plupload hay disponibles varios ejemplos de formularios para el envío de imágenes al servidor. En este artículo vamos a comentar el “Custom upload”, que se encuentra en “/plupload/examples/custom.html”. El código de la página es:

1. Carga de librerías

2. Código javascript

Como vemos, plupload crea un objeto “uploader”, y en su inicialización establece una serie de parámetros, entre los cuales se encuentra el que permite redimensionar la imagen:

También podemos ver otro parámetro “max_file_size” para limitar el tamaño máximo de la imagen a enviar.

Por otra parte, en el parámetro “url” se especifica la url de destino a la que enviar los datos. El valor que se indica en el ejemplo es “upload.php”, por lo que la url absoluta es “/plupload/examples/upload.php”. upload.php viene incluido también en el paquete de instalación de plupload. Debemos editar este fichero para establecer como valor de la variable “$targetDir” el directorio en donde queremos que se depositen las imágenes enviadas.

En nuestro caso, establecemos:

con este valor, las imagenes se crearán bajo el directorio “plupload/examples/uploads”. Deberemos asegurarnos de el usuario con el que se ejecuta el servidor web tenga permisos de escritura en este directorio.

3. HTML <body> con los enlaces de selección y envío de ficheros

Envío de imágenes

Accediendo desde el navegador a la página “/plupload/examples/custom.html”, se presenta una página con un enlace “[Select files]” para la selección de ficheros, y otro “[Upload files]” para realizar el envio:

plupload-custom-upload

Como vemos, en la pantalla se indica el “runtime” disponible en el dispositivo cliente para realizar el procesamiento de la imagen (en el ejemplo, “html5”).

Pulsando en “Select files”, aparece una ventana de popup que permite seleccionar los ficheros que queremos enviar:

plupload-seleccionar-imagenes

Por último, pulsando en “Upload files”, se lleva a cabo el envío de los ficheros:

plupload-custom-upload-2

Como hemos dicho antes, hemos editado el fichero upload.php para que los ficheros queden almacenados en el subdirectorio “pluploads/examples/uploads”. Comprobamos el resultado:

como vemos, plupload ha aplicado el redimensionamiento establecido en la configuración, y por esta razón las imágenes recibidas en el servidor tienen un tamaño inferior a las originales.

 Publicado por en 9:48 am

 Deja un comentario

(requerido)

(requerido)