La funcionalidad de subir múltiples ficheros mediante Javascript no es nueva incluso vimos que algunos navegadores más modernos lo están implementando ya. Pero este plugin de jQuery permite extender las posibilidades de esta funcionalidad condicionado las capacidades del <input /> encargado de subir los ficheros.
// Multiupload
<input type="file" class="multi"/>
// Solo 2 ficheros
<input type="file" class="multi" maxlength="2"/>
// Solo ficheros .GIF y .JPG (requiere validación en el servidor)
<input type="file" class="multi" accept="gif|jpg"/>Tan sencillo como indicarlo mediante el uso de estos atributos o complicandonos más la vida con eventos o añadiendo un estilo propio a la lista de ficheros:
$(function(){
$('.multi').MultiFile({
STRING: {
file: '<em title="Click to remove" onclick="$(this).parent().prev().click()">$file</em>',
remove: '<img src="/@/bin.gif" height="16" width="16" alt="x"/>'
}
});
});Muestra en listado usando la etique <em /> para mostrar el nombre del fichero en cursiva y se le asigna una imagen al botón de borrar.
Otra característica interesante a destacar es la posibilidad de idiomatizar la salida, haciendo que sea muy sencillo establecer las etiquetas que el usuario vea.
//HTML
<input type="file" class="multi-es" />
// Opciones
$(function(){
$('.multi-es').MultiFile({
accept:'gif|jpg', max:3, STRING: {
remove:'Remover',
selected:'Seleccionado: $file',
denied:'El tipo del archivo $ext es inválido',
duplicate:'Archivo ya seleccionado:\n$file!'
}
});
});
5 comentarios, 1 referencias
+
#