Subir multiples archivos Multi File Upload con Jquery

Os traigo una utilidad que a buen seguro habreis estado buscando como el que busca oro en el Missisipi, es un plugin de Jquery para subir de una vez multiples archivos, la caracteristica mas importante que aporta es que puedes desde seleccionar que tipos de archivos puedes subir hasta que tamaño pueden tener, tambien filtra si el archivo está ya seleccionado y otras muchas cosas que os voy a mostrar, MANOS A LA OBRA.

Como siempre necesitaremos una serie de archivos que aquí os enseño.

La magestuosa
- Jquery.js
- MultiFile.js
- Metafile <– Lo necesitaremos para ahorrar un poco de trabajo ( en otro Post comentare su funcionamiento).

Y ahora el código para empezar y algunos ejemplos.

METODO 1.

Aquí os voy a explicar un poco los argumento que se han usado y para lo que valen, este ejemplo utiliza el plugin METADATA ¿Por que? por que pasamos los argumento directamente dentro de la class del objeto tipo FILE.

En primer lugar podeis observar que dentro de la class metemos varias cosas directamente.
Accept:’Tipo de extension | Tipo de extension, etc..’ Soporta todas las extensiones graficas, tambien podriamos poner las extensiones tipo word o txt, etc…
remove:’Texto’, es el texto que saldra junto al fichero seleccionado en caso de que no queramos subirlo.
Selected:’texto: $file’ <– Igual que el anterior la variable $file contiene el nombre del archivo seleccionado.
denied:’texto $ext’<– el texto que sale cuando el archivo tiene una extensión no válida, la variable $ext contiene la extension del archivo que ha intentado subir.
duplicate:’texto:\n$file!’ <– texto bla bla, y el nombre del archivo.

METODO 2 ( sin el plugin METADATA ):

HTML

<input type=”file” id=”<span style=”color: #090000;”>PortugueseFileUpload</span>” />

JAVASCRIPT

$(function(){
$(’<span style=”color: #090000;”>#PortugueseFileUpload</span>’).MultiFile({
accept:’gif|jpg’, max:3, STRING: {
remove:’Remover’,
selected:’Selecionado: $file’,
denied:’Invalido arquivo de tipo $ext!’,
duplicate:’Arquivo ja selecionado:\n$file!’
}
});
});

Evidentemente en este tutorial no voy a explicar el funcionamiento del framework Jquery, para los que aun no sepan como funciona pueden buscar en google manuales o esperar que en breve hare un pequeño tutorial para explicar el funcionamiento, nomenclaturas, usos y demas para programadores novatos.

En este ejemplo la funcion Jquery cuando se ejecuta al comienzo de la carga coge los elementos que contengan “<span style=”color: #900;”>#PortugueseFileUpload</span>” y le da la propiedad multifile del plugin, lo único que comentare aquí es la nueva opción
Max: ‘Numero’, <– el numero es la cantidad de archivos que dejara subir de una vez.

METODO 3
HTML

JAVASCRIPT

$(function(){
$(’.multi-pt‘).MultiFile({ <– Selecciona todos los objetos con class multi-pt
accept:’gif|jpg’, max:3, STRING: { <– le agrega las propiedades que ya hemos aprendido.
remove:’Remover’,
selected:’Selecionado: $file’,
denied:’Invalido arquivo de tipo $ext!’,
duplicate:’Arquivo ja selecionado:\n$file!’
}
});
});

En este ejemplo es un claro uso de Jquery en multi seleccion de objetos y agregarles a estos la opcion de multifile.

La demo de todo esto lo podeis ver en la pagina donde he traducido todo esto.
- Fyneworks

Aquí termina el tutorial.

ATENCIOOONN, por supesto javascript no está preparado para subir archivos a un servidor, este ejemplo sólo funciona con la siguiente rutina PHP, ASP; ETC.. que son los encargados de hacer estos menesteres, en el siguiente tutorial explico cómo subir archivos al modo FLICKR o GMAIL un saludo…..

DANIEL