Contenido

Subir múltiples ficheros con jQuery

3 abr

+ 6

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!'
   }
  });
 });

[Descargar][Demo]

  • Esta muy bien, de hecho lo tengo ya fichado para algún proyecto.

    Aunque verdaderamente los uploads que ahora mismo mejor quedan yo creo que son los automáticos (seleccionas el fichero, se empieza a subir y demás y con barra de progreso). Como puedes ver, te lo he dejado caer a ver si conoces alguna UI o plugin de ese tipo y me iluminas xD.

    Saludos

  • hola, gracias por el tutorial, pero tengo una duda.

    como capturo los datos con php ? lo he probado y no consigo capturar los ficheros pero para que me funcione para subirlos al servidor ?

    algun ejemplo ?

    saludos,

  • Excelente herramienta , pero hay otras asi como dice carlinhos

  • Hola, muy buenas las explicaciones sobre la funcionalidad.

    La duda que tengo es en que parte del codigo deben ir estás funciones, van en el formulrario donde se encuentran los inputs file??
    Otra duda que quizás puedan ayudarme es como controlo que por lo menos se haya seleccionado un archivo, es decir que sin no se selecciono un archivo para hacer el upload no se pueda ejecutar el actión del form.
    Muchas gracias y saludos, Raúl

  • Hola, ya resolví donde incluir las funciones, van en la página del form. Pero aun me falta resolver como controlo que por lo menos se haya seleccionado un archivo para hacer el upload.

    Gracias a los que puedan ayudarme y cualquier duda en la que pueda colaborar estoy a las ordenes.

    Raúl

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.