Subir archivos a un servidor utilizando la librería JQuery. Permite uploads simples y también de múltiples archivos.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este es un excelente plugin para la librería de programación JQuery, que permite a los usuarios de un sitio web, subir uno o múltiples archivos al servidor por medio de un formulario.

Como cualquier formulario de uploads de archivos, puede ser útil para diferentes tipos de aplicaciones web y sitios que necesiten implementar una opción por ejemplo para subir y colocar imágenes en una carpeta del servidor, subir y enviar videos, documentos, gráficos y fotos, programas, ficheros comprimidos etc ..

Es muy completo a diferencia de otros scripts y programas similares. Por ejemplo podrás desplegar una barra de progreso para ver el proceso de upload, tratar errores comunes a la hora de seleccionar y transferir los archivos, configurar los tipos de archivos que se subirán al servidor, utilizar eventos para controlar el comportamiento, indicar el límite para el tamaño de los ficheros, y muchas otras opciones.

El plugin es completamente gratis y de libre uso, y la librería JQuery también es un framework Open source ( Software libre con licencia GPL) para programar en Javascript. Ver definición de JQuery en el sitio de la wikipedia.

A continuación se describe una completa guía de instalación y uso, de esta muy buena alternanativa para subir ficheros por medio de un formulario web. El manual describe los pasos necesarios para instalar el script en la página, como también ver las opciones de configuración para manipularlo y adaptarlo a nuestra necesidades.. ( También puedes ver un video tutorial al final de la página)

Mas información sobre el programa.

Manual - Indice del contenido.

  1. Características y descripción general del formulario.
  2. Instalación e implementación del script ( en PHP )
  3. Instalar el script en otras plataformas ( en ASP.NET, C#.)
  4. Variables y opciones para configurar el formulario.
    1. Opción buttonImg ( Botón personalizado )
    2. Opción Auto ( Upload de archivo automático )
    3. Opción buttonText ( Texto personalizado para el botón )
    4. Opción DisplayData ( Texto de información de transferencia )
    5. Opciones fileDesc y FileExt. ( Establecer tipos de archivos para el upload )
    6. Opción cancelImg ( Botón personalizado para cancelar el upload )
    7. Opción Folder ( Ruta de la carpeta donde colocar los archivos )
    8. Opción Height ( Alto del botón )
    9. Opción Method ( GET o POST )
    10. Opción sizeLimit ( Límite para el tamaño de los archivos )
    11. Opción simUploadLimit ( envíos múltiples de archivos de forma simultánea )
    12. Opción Multi ( Habilitar el envío de múltiples archivos )
    13. Otras opciones y parámetros.
  5. Colección de ejemplos.

 

1 - Características y descripción general del formulario.

En el archivo de descarga, podemos acceder a un ejemplo de demostración. Este archivo ( index.php ) se encuentra en el directorio Examples.

También en la web oficial y en esta misma página, podrás ver:

  • Como instalar un formulario simple para subir un único archivo.
  • Otro formulario para uploads de múltiples ficheros.
  • Para mostrar un botón personalizado ( Botón seleccionar archivo ) mas una barra de progreso para la carga o upload.
  • Muchos otros.

Esta es una vista previa.

En el apartado Single file upload, desde el botón Browse, se abrirá el diálogo de windows para elegir los ficheros. Automáticamente, luego de cerrarse el diálogo de windows, comenzará la transferencia. Esto se puede también cambiar para que el upload sólo comience cuando el usuario presione un botón que inicie el envío ( ver información más abajo)

La otra sección que se muestra en esta captura ( Single file - Custom button ), muestra como, modificando una sola línea de código, establecer un botón personalizado mediante una imagen. Muy útil para cambiar la apariencia y adaptarlo lo mejor posible al aspecto visual de nuestro sitio web.

El otro ejemplo, es como se mencionó el form para cargar múltiples archivos. Este form está configurado para aceptar un máximo de 3 ficheros al mismo tiempo, si el usuario selecciona más, se mostrará un mensaje de error, y cargará sólo 3.

También, cada archivo, mostrará:

  • Un progressbar y el porcentaje de transferencia actual.
  • Un ícono o botón de cruz para cancelar la transferencia de cada archivo en forma individual,muy útil si el usuario seleccionó un fichero grande por descuido o error.
  • El nombre del archivo y el tamaño.
  • El estado ( transfiriendo, completado, error).

Nota: Puedes ver y probar los dos formularios online en la web del autor.. Pulsa en este enlace para acceder a la página.

2 - Instalación e implementación del script ( en PHP )

Para utilizar e implementar el formulario es muy simple:

Luego de descargar el ejemplo, descomprimir el archivo zip y subir al sitio web todos los ficheros.

Nota: Todos los archivos que se subirán al servidor web mediante el formulario, se cargarán o guardarán en la carpeta llamada uploads.

Una cosa importante es que se deberán establecer los permisos correspondientes de acceso y escritura a dicha carpeta para que el script funcione correctamente y pueda colocar los ficheros en este directorio.

Si necesitas modificar por alguna razón el nombre y ubicación de esta carpeta, mas abajo se describe la variable que determina la ruta y nombre de este directorio.

Como segundo paso, se deberá enlazar o hacer referencia desde la página web a los siguientes archivos ( en la sección HEAD ):

  • Archivo javascript: Librería jQuery
  • Archivo javascript:: uploadify.js
  • Archivo de hojas de estilo CSS: uploadify.css
  • Archivo javascript:: swfobject.js.

Este es el código que deberá colocarse en la sección HEAD de la página web.

Luego, el código del formulario que debe ir en la sección BODY es es el siguiente: ( Este código puede variar, ver los ejemplos que se detallan mas abajo)

El código necesario para el formulario como vemos es muy sencillo, y define algunas opciones para el mismo, por ejemplo

  • script: Indica la ruta del archivo javascript principal. Por defecto se utiliza la carpeta scripts del directorio raíz ( scripts/uploadify.php )
  • Folder: La ruta de la carpeta a donde se alojarán los archivos, por defecto es el directorio uploads.
  • cancelImg: Un archivo de imagen para el botón de cancelar, archivo cancel.png, obviamente es posible crear nuestra propia imagen con cualquier editor gráfico, o utilizar un archivo de ícono en formato PNG.
  • auto: Una variable de tipo Boolean para indicar si el archivo se deberá subir en forma automática al seleccionarlo desde el cuadro de diálogo. Por defecto esta opción está habilitada, es decir con el valor True. Al cerrar el cuadro de diálogo, comenzará de forma inmediata la transferencia.
  • multi: Opción que determina si se habilita o no la posibilidad de subir múltiples archivos, Por defecto está desactivada si no se indica en el script.
  • uploader: Ruta del archivo Flash que tiene la interfaz del formulario. Por defecto es scripts/uploadify.swf

Nota: Hay mas parámetros y opciones disponibles para utilizar. Mas abajo se describen las principales.

3 - Instalar el script en otras plataformas: ASP.NET

Si se necesita implementar y utilizar el formulario pero desde una página ASP.NET utilizando código C#, puedes ver este pequeño tutorial de 15 minutos con un video y el respectivo código fuente.

En el video y tutorial, se explica como crear un control escrito en C-Sharp para utilizarlo desde una página ASP.NET.

Nota: si el video se visualiza de forma borrosa y no puedes ver el código fuente correctamente, intenta cargar el video en alta calidad, mediante el botón HD del reproductor.

Uploadify Asp.Net C# Tutorial from Cason Clagg on Vimeo.

Nota: el autor de este video, también describe en su blog algunos comentarios y código fuente. Visitar sitio

4 - Variables y opciones para configurar el formulario:

Para personalizar y configurar el script para las diferentes opciones del formulario que permitirá subir los archivos, tenemos una serie de variables y opciones que podemos incluir y modificar en el script de inicialización que se coloca en la sección HEAD del código HTML.

Nota: Estas son sólo algunas de las opciones, para ver todas ellas, las puedes acceder en el sitio oficial ( en la sección de documentación).

4.1 - Opción buttonImg ( Botón personalizado )

Es una variable de tipo string opcional, para establecer la ruta de una imagen para el botón que permite cargar los archivos del upload mediante el cuadro de diálogo de windows "Seleccionar archivos ..", por ejemplo un gráfico PNG con el texto Browse, o con el texto Seleccionar archivos, etc ..

A continuación se describe el código fuente y una captura de pantalla del botón dentro del formulario.

4.2 - Opción Auto ( Upload de archivo automático )

Es una variable de tipo boolean, para que el usuario, apenas seleccione y cargue los archivos, comience el upload o transferencia de forma inmediata, es decir sin necesidad de presionar el botón para cargarlo.

Cuando el usuario cierre el cuadro de diálogo del sistema, comenzará de forma automática el envío.

Esta variable es opcional, y por defecto se encuentra en False, es decir desactivada, y el upload se iniciará por intervención del usuario mediante un botón/enlace. Para habilitarla, se deberá colocar en este parámetro el valor True.

A continuación se describe el código fuente para utilizar esta configuración y una captura de pantalla del botón dentro del formulario.

El código javascript.

El código HTML.

La vista previa del formulario es la siguiente:

4.3 - Opción buttonText ( Texto personalizado para el botón )

Es una variable de tipo string, para establecer el texto que aparecerá en el botón por defecto para seleccionar los archivos por parte del usuario.

Esta variable es opcional, aquí podremos colocar por ejemplo: Seleccione un archivo, o Buscar ficheros, etc .. Si no se indica este parámetro de opción, por defecto el texto del botón será: Select Files.

A continuación se describe el código fuente para utilizar esta configuración y una captura de pantalla del texto del botón con el valor: Add to queue.

El código javascript.

El código HTML.

La vista previa del formulario es la siguiente:

4.4 - Opción DisplayData ( Texto de información de transferencia )

Es una variable de tipo string, que permite visualizar, junto a la barra de progreso de transferencia del fichero, la velocidad en Kilobytes por segundo del upload.

En esta opción se puede establecer dos valores:

  • percentage: Muestra la transferencia en porcentaje. ( es la default )
  • speed: Muestra la barra de progreso junto a la valocidad de transferencia ( en formato kb/segundo).

Esta variable es opcional y por defecto se utilizará la primer opción, es decir el valor percentage

A continuación se describe el código fuente para utilizar este método y una captura de pantalla que muestra el progressbar y la leyenda para el valor de velocidad de subida.

El código javascript.

El código HTML.

Vista previa del form.

4.5 - Opciones fileDesc y FileExt. ( Establecer tipos de archivos para el upload )

Estas opciones se utilizan de forma conjunta. Permiten establecer los tipos de archivos que se muestran en la lista desplegable del cuadro de diálogo del sistema ( Opción tipo), es decir del diálogo de windows para Abrir y seleccionar archivos de nuestro disco duro.

La opción FileExt es un string que contiene las extensiones de los ficheros, cada extensión deberá separarse mediante un punto y coma, por ejemplo:

  • Por ejemplo para filtrar archivos de imágenes de tipo jpg, gif y png, el valor de cadena sería: '*.jpg;*.gif;*.png' ( entre comillas simples)
  • para archivos de video podría ser : '*.avi;*.wmv;*.flv;*.mov'
  • Para documentos: '*.doc;*.txt;*.rtf'
  • etc ...

La opción FileDesc, es la descripción de la lista de tipos/extensiones utilizadas para FileExt, por ejemplo:

  • 'Archivos gráficos (.JPG, .GIF, .PNG)'. Al ser una cadena o string, también deberán colocarse entre comillas simples.
  • 'Archivos de audio ( MP3, WAV, WMA )'
  • Etc ..

El código javascript.

El código HTML.

Vista previa de la lista desplegable en el cuadro de diálogo.

4.6 - Opción cancelImg ( Botón personalizado para cancelar el upload )

Es una variable de tipo string, que permite establecer el path de un archivo de imagen para utilizar como botón personalizado para la cancelación de la transferencia del archivo.

Este parámetro no es opcional, y por defecto se utiliza el archivo gráfico cancel.png. ( es la cruz negra en la parte derecha de la ventana de formulario)

A continuación se describe el código fuente y una captura del botón para cancelar el envío del archivo.

El código javascript.

El código HTML.

Vista previa.

4.7 - Opción Folder ( Ruta de la carpeta donde colocar los archivos )

Este parámetro u opción de tipo string, debe indicarse de forma obligatoria, y sirve para establecer la ruta de la carpeta donde se guardarán los archivos.

Hay que asegurarse de que la carpeta existe antes de subirlos, o la secuencia de comandos devolverá un error durante la carga.

4.8 - Opción Height ( Alto del botón )

Este valor de tipo numérico ( integer ), permite establecer el alto en pixeles del botón flash que abre el cuadro de diálogo del sistema para que el usuario seleccione los ficheros.

El parámetro es opcional y por defecto se utiliza el valor 30

4.9 - Opción Method ( GET o POST )

Es un parámetro de tipo string, para indicar el método de envío del formulario utilizando GET o POST.

Es opcional, y si no se indica se utilizará el método POST.

4.10 - Opción sizeLimit ( Límite para el tamaño de los archivos )

Este parámetro importante, permite indicar el tamaño máximo que puede tener un archivo para la transferencia.

Esta opción no es requerida, y si no se establece, se podrá enviar cualquier archivo sin importar su tamaño.

En cambio, si indicamos el tamaño ( debe ser en bytes), y el fichero sobrepasa dicho valor, el formulario mostrará un error indicando que ha superado el límite de tamaño.

El error es mostrado mediante el texto  File Size Error, y también se pondrá de color rojo el fondo del formulario, como se puede ver en la captura de pantalla.

El código javascript.

El código HTML.

4.11 - Opción simUploadLimit ( envíos múltiples de archivos de forma simultánea )

Este argumento de tipo numérico ( Integer ) determinará el número de envíos simultáneos que podrán realizarse.

Este parámetro es opcional y por defecto se enviará sólo un archivo a la vez, es decir que si seleccionamos varios ficheros para la transferencia, a medida que se termine con el envío de uno, comenzará el siguiente hasta que culmine con todos los ficheros seleccionados en la cola de transferencia.

Si indicamos otro número, por ejemplo 3, se podrán enviar tres archivos de forma simultánea.

Nota: Para utilizar esta opción, es necesario también que el parámetro multi ( se describe a continuación ) esté habilitado con el valor True.

El código javascript.

Vista previa de dos archivos enviados de forma simultánea.

4.12 - Opción Multi ( Habilitar el envío de múltiples archivos )

Esta opción de tipo Boolean, permitirá (si se encuentra en True), activar el envío múltiple de archivos.

El parámetro es opcional, y por defecto esta opción se encuentra deshabilitada, es decir que si necesitamos utilizar el formulario para el envío de muchos archivos, tendremos que indicar esta opción de forma obligatoria en el script de inicialización.

El código javascript.

4.13 - Otras opciones y parámetros.

En la documentación podrás ver otras opciones para personalizar el formulario, por ejemplo:

  • removeCompleted: Valor boolean que permite remover del formulario los archivos cuando finalice el envío.
  • Script: Valor string para establecer la ruta del script principal para el upload ( es el archivo uploadify.php que procesa el formulario)

Además, acceder a la lista de eventos y métodos para controlar los uploads.

5 - Colección de ejemplos.

En este enlace, podrás descargar una interesante colección de ejemplos.

En la carpeta que se incluye en el archivo zip ( directorio Uploadify Sample Collection ), hay varios demos que puedes utilizar directamente o también adaptarlo a tus necesidades. ( son 8 ejemplos en total ).

Para acceder a ellos, ejecutar el archivo index.php que te mostrará la lista de todos los formularios.

A continuación puedes ver una captura de cada uno de ellos y su descripción.

5.1 - Ejemplo 1

En el archivo PHP uploadify-multi-single.php, tenemos tres ejemplos.

  • Simple upload de archivos que permite visualizar la velocidad.
  • Upload múltiples, que permite hacerlo de forma simultánea y con un botón personalizado.
  • Upload múltiples automáticos: Sólo para archivos de imágenes y gráficos.

5.1 - Ejemplo 2

En el archivo PHP uploadify-scriptData.php, también hay tres ejemplos:

El primero , muestra como hacer el upload, y luego de finalizada la transferencia, mostrar una respuesta al usuario, en este caso mediante un cuadro de diálogo.

El otro, muestra como subir múltiples ficheros utilizando varios campos de entrada. Cada ves que termina una transferencia , se muestra un cuadro de diálogo para informar si el archivo se ha enviado de forma satisfactoria.

Nota: Pulsando en este enlace, podrás probar si lo deseas una versión Beta del script. En esta versión de prueba se han modificado y mejorado las siguientes opciones.

  • Uso de SWFUpload para mayor estabilidad y compatibilidad.
  • Se ha vuelto a programar y escribir todo el código Javascript.
  • Mejoras mediante HTML5.
  • Error solucionado en la opción de Delay cuando se añaden archivos a la cola.
  • Los ajustes de actualización ahora se pueden realizar a través de la función onSelectOnce.
  • Nueva opción para mostrar la barra de progreso con una animación.
  • Actualización del archivo PNG del botón cancelar ( Cancel.png)
  • Problemas solucionado con el control del script, este no funciona correctamente cuando se utiliza una ruta de carpeta relativa.

Requerimientos de instalación y uso.

Lenguaje : PHP o ASP.NET

Otros: Librería JQuery v 1.2 o superior, Flash


Videos tutoriales.

Indice de videos.

Este videotutorial muestra el funcionamiento del plugin jQuery para poder realizar uploads de ficheros en páginas PHP.

En el video se muestra el funcionamiento del script, utilizando un servidor local de páginas web para poder ejecutar el archivo PHP que contiene los demos. Aunque el procedimiento y el resultado final es el mismo que subir los archivos a un directorio del servidor de forma manual mediante un cliente FTP como cualquier otro script PHP.

En el video también podrás ver algunos de los ejemplos que se incluyen en la demostración ( Los archivos los puedes descargar pulsando aquí )

Duración del tutorial: 7 minutos, 16 segundos.

Nota: Si tienes problemas para visualizar correctamente el tutorial, puedes ver el video en alta definición - HD - pulsando en este enlace )

 

 

Cambios, actualizaciones y mejoras del programa.

Lista de cambios y actualizaciones.

  • Nuevo evento OnOpen que permite obtener el detalle e información del archivo.
  • Problema corregido con la verificación de archivos.
  • Problema corregido que mostraba los bytes incorrectos al cargar el archivo desde el fichero Flash.
  • Actualización en la documentación.
  • Bug solucionado en el evento que permitía cancelar el upload y envío.
  • Ejemplo añadido en el fichero de descarga junto al script.
  • Problema solucionado al redimensionar el botón en el Flash.
  • Nueva opción para verificar la existencia previa de lo archivos en el servidor antes de subirlos.
  • Nueva opción para obtener datos de fecha y hora del fichero.
  • Otros.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
www.uploadify.com
Licencia:
Gratis - Open source
Versión:
2.14
Idioma:
Inglés
Programa actualizado:
28 SEP 2011


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: