Multifile Upload en Jquery – carga de archivos uno a uno

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:

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

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

<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>

Ver ejemplo de Funcionamiento

Mas Documentación

Descargate la libreria: jquery.Multifile

Fuente Original: vease  https://www.jose-aguilar.com/blog/multiple-file-upload/#codesyntax_2

 

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s