Multiple file upload

jQuery Multiple File Upload Plugin (multifile) es un plugin no demasiado prominente para jQuery que ayuda a los usuarios a seleccionar fácilmente varios archivos para la carga rápida y sencilla en su servidor mientras que también proporciona algunas funciones básicas de validación para ayudar a los desarrolladores identificar errores simples y para evitar la subida de archivos indeseados al servidor.

Este plugin no va a crear un cuadro de diálogo para permite al usuario seleccionar varios archivos a la vez. Simplemente no se puede hacer a través de JavaScript. Si deseas obtener este tipo de interfaz debes considerar el uso del atributo multiple de HTML5  o una de las muchas otras soluciones de carga de archivos basadas en flash (por ejemplo: SWFUpload, Uploadify u otros).

El plugin crea un nuevo elemento de entrada de archivo cada vez que el usuario selecciona un archivo, lo que permite al usuario seleccionar un archivo, luego otro, luego otro y así sucesivamente … No permite la selección de todos los archivos de un golpe. Solo uno cada vez.

En el ejemplo de demostración que vamos ilustrar vamos a aceptar archivos tipo .gif, .jpg o .png y solo se puede subir un máximo de 3 archivos.

Necesitaremos añadir en la cabecera de nuestra página la librería jQuery, el plugin y su llamada:

Source code

<script src='js/jquery.js' type="text/javascript"></script>
<script src='js/jquery.MultiFile.js' type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#demo1').MultiFile({ 
        list: '#demo1-list'
       }); 
});
</script>

Y donde tengamos nuestro formulario podríamos hacer lo siguiente:

Source code

<form action="index.php" method="post">
 <input id="demo1" name="files[]" type="file" class="multi" accept="gif|jpg|png" maxlength="3" />
 <div id="demo1-list"></div>
 <p><input type="submit" name="upload" value="subir" /></p>
</form>

Un inconveniente que veo a este plugin es que no funciona con todas las versiones de jQuery.

Ver ejemplo en funcionamiento

Ver más documentación