Cuando comenzamos a desarrollar scripts avanzados y a utilizar tecnologías como ajax nos sale a relucir porque no es posible subir fotos a un servidor sin necesidad de recargar la página, esto se deriva de un error de seguridad en los navegadores. Ahora bien existe la posibilidad de emular esta acción mediante plugins, para esto crearemos nuestro jquery para fotos.

Para nuestro ejemplo jQuery para fotos emplearemos AjaxUpload.2.0.js en la versión que utiliza iframes y que podrás encontrar en su sitio oficial.

Sitio Oficial AjaxUpload

Al final del ejemplo te daré un par de plugins que pueden ser de utilidad para tus aplicaciones jquery para fotos y que son mas actuales.

Comúnmente nos encontramos tutoriales en donde nos enseñan a subir fotos de forma asíncrona, pero que pasa si lo que queremos es subir fotos y al mismo tiempo se vea reflejada en nuestra página, por ejemplo editar el perfil de un usuario y subir sus fotos, y que esta se vea en tiempo real en su respectivo contenedor, esto lo lograremos usando jquery para fotos.

En este pequeño tutorial – jquery para fotos – vamos a ver un ejemplo con las siguientes características:

  • Subir fotos
  • Fijar dimensiones de las fotos permitidas
  • Fijar el tamaño en kbs de las fotos
  • Fijar tipos de fotos que se pueden subir
  • Presentar en pantalla las fotos publicadas

Puedes descargar el código completo de jquery para fotos desde github

Video Tutorial

Para tener éxito en nuestro jquery para fotos usaremos HTML5, CSS3, jQuery y PHP, además del plugin antes mencionado.

HTML ( jquery para fotos)

Primero vamos a maquetar la plantilla con HTML, es importante tener en cuenta que se puede adaptar a cualquiera de sus diseños sin problema, posteriormente implementaremos jquery para fotos.

index.html

upLoad de fotos con Ajax


Publicando Fotografía…
Powered by Luis Fernando Cázares Bulbarela || 2012

En realidad es muy poco HTML el que necesitamos para maquetar nuestra plantilla, tenemos un contenedor de fotos id=”contenedorImagen”, una imagen por default id=”fotografia”, un botón id=”addImage” y un loader id=”loaderAjax”, esta es la parte medular para llevar a cabo las tareas en nuestro jquery para fotos.

EL gif animado que utilizaremos para nuestro jquery para fotos lo pueden obtener y/o crear a su gusto en ajaxload.info

Ahora vamos a dar un poco de estilo a nuestras etiquetas HTML mediante CSS, estamos a la mitad de nuestro jquery para fotos.

CSS ( jquery para fotos )

estilos.css

De igual manera el CSS es muy sencillo, simplemente estamos acomodando en nuestro jquery para fotos las etiquetas al centro y dando un poco de vista. Este archivo hay que incluirlo en nuestro index.html de la siguiente manera:

En mi caso cree una carpeta en la raíz llamada css y dentro coloqué el archivo estilos.css

Página de Inicio AjaxUpload

El siguiente paso en nuestro jquery para fotos es agregar las librerías jquery y ajaxUpLoad al archivo principal, lo hacemos ingresando las siguientes líneas dentro de la etiqueta <head></head>:

El siguiente paso es ingresar el javaScript que se encargará de crear dar funcionalidad al botón y llamar al php que realiza la tarea de publicación de las fotos. Este puede ir en el archivo index.html o inclusive se puede crear un archivo .js e incluirlo, depende de cada desarrollador como lo quiera hacer.

JavaScript

En el código mostrado lo que estamos haciendo es dar formato y funcionalidad a la etiqueta <button>

Este plugin para jQyery me gusta mucho porque esta muy sencillo ya que prácticamente son tres opciones las que debemos aplicar y configurar.

action: es para indicar a que archivo vamos a llamar cuando se seleccionan las fotos en cuestion.

onSubmit: aquí podemos mediante código javascript realizar varias tareas mientras se esta enviando la petición al servidor, en nuestro caso validamos la extensión del archivo, es importante que también la validemos del lado del servidor, esto para tener un poco mas de seguridad, lo veremos en el script PHP. Las tareas que se llevan a cabo son: validar la extensión del archivo a subir, mostrar el preLoader, cambiar el texto del botón y deshabilitar el botón, esto último para evitar el doble click.

onComplete: aquí es donde realizamos todas las acciones al momento de responder el servidor, en este caso se cambia el texto del botón, parseamos la cadena jSON que nos regresa el script PHP, en caso de ser positivo el upload de las fotos, lo que hacemos es remover el atributo scr y re insertarlo, ya con el nombre de las fotos que se han subido al servidor, ocultamos el preloader y habilitamos el botón nuevamente. En caso de no ser positivo el upLoad de las fotos simplemente mostramos un alert en donde mostramos el mensaje de error que traemos desde nuestro PHP.

Hasta este punto ya tenemos nuestro jQuery para fotos habilitado con el botón y listo nuestro javascript para realizar su cometido, ahora veamos el script PHP que se encargará de procesar la petición y regresar el resultado de esta.

Ejecutando AjaxUpload

PHP ( jquery para fotos)

uploadFile.php

Ire explicando cada conjunto de líneas y al final mostraré el código completo del jquery para fotos.

Instrucción para decir al script que se detenga un intervalo de tiempo, esto para poder apreciar el funcionamiento del ejemplo en un servidor local.

Definimos valores y límites que deben ser respetados por las fotos a subir, tamaño en KBs y dimensiones del archivo, además del nombre y url para guardarlo

Como lo comenté anteriormente no solamente basta con validar la extensión del archivo en el javascript, para esto existe la definición de tipos de archivo MIME que simplemente es la descripción del archivo y que comúnmente se usa del lado del servidor y es necesaria para este ejemplo de jquery para fotos.

Creamos un par de baderas para saber cuando se sigue ejecutando el script jQuery para fotos y un mensaje inicial.

Obtenemos la informacón del archivo que se esta subiendo, esto mediante la variable de servidor $_FILES[]

Extraemos la extensión del nombre de archivo y generamos el nuevo nombre del mismo, si se dan cuenta estoy agregado una marca de tiempo, esto debido a que al cambiar el atributo src con javascript no refresca, de tal manera que si el nombre del archivo es diferente lo hace sin problema.

Nota: La línea $imgFile = fileName.mktime().’.’.$extension[$num]; se modificó a $imgFile = fileName.time().’.’.$extension[$num];, esto enviaba un warning de php en tiempo de ejecución.

Validamos que el tamaño de la imagen sea correcto.

Ahora lo que hacemos es verificar si la bandera del tamaño de imagen tiene valor TRUE y ejecutamos la validación de tipo y peso en KBs, verificamos si el archivo existe en la carpeta temporal del servidor y finalmennte comprobamos si se pudo copiar a la carpeta que definimos al principio del script.

Armamos el array a convertir en cadena jSON y lo imprimimos.

A grandes rasgos lo que sucederá en nuestro jquery para fotos, cuando hagamos click en el botón Cambiar Imagen, se abrirar el diálogo para seleccionar un archivo, al aceptar este se intentará subir al servidor en donde nuestro script PHP se encargará de procesarlo y regresar un mensaje. El javascript procesará la cadena jSON y se encargará de enviar un mensaje de error o en su defecto cambiar la imagen que se muestra por default.

Foto Incial

Pantalla Final con foto

index.html ( jquery para fotos completo )

Sin duda alguna, en la red podremos encontrar varios tutoriales de jquery para fotos e inclusive plugins, aquí les dejo un par que pueden ser útiles dependiendo del enfoque que le quieran dar a sus aplicaciones, ambos son muy poderosos y adaptables a la mayoría de nuestras necesidades.

Uploadify (Versión gratis y de pago)

Link al sitio oficial

Web Site Uploadify

jQuery File Upload (versión gratis)

Link al sitio oficial

Sitio Oficial