Bootstrap File Input (archivos), utilizando html5

DESCARGA : Bootstrap File Input

Bootstrap File Input (archivos), utilizando html5, Un campo mejorado con HTML 5 que nos permite la entrada de archivo, este plugin trabaja con la versión 3 de Bootstrap y permite la previsualización los archivos para las imágenes y el texto, tambien puedes seleccionar múltiples archivos y más.

El plug-in mejora conceptos usuales y simplifica la inicialización de código muy extenso, lo impresionante es que la manera de usar es simplemente con un marcado HTML en un archivo de entrada.

Aparte de que también ofrece soporte para la previsualización de archivos múltiples y la vista previa de las imágenes y los tipos de texto.

Lo más cómodo e interesante en este plugin es que muestra la imagen antes de realizar la carga al servidor, por lo que el usuario final puede ver la imagen antes de enviarla al servidor, el detalle es que no incluye ninguna carga en con ajax del archivo.

Tienes una demostración:http://plugins.krajee.com/file-input/demo

 

 

Ya no tienes que preocuparte más por la carga de tus imágenes, la manera de impelementar este plugin es sencilla, siempre y cuando tengas que usar bootstrap para la construcción de tú aplicación.

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Krajee JQuery Plugins - &copy; Kartik</title>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/fileinput.min.js" type="text/javascript"></script>

</head>

 

 

<body>
<div class="container">
<h1>Bootstrap File Input Example</h1>
<form enctype="multipart/form-data">
<div class="form-group">
<input id="file-1" type="file" class="file" multiple=true data-preview-file-type="any">
</div>
<div class="form-group">
<input id="file-2" type="file" class="file" readonly=true>
</div>
<div class="form-group">
<input id="file-3" type="file" multiple=true>
</div>
<div class="form-group">
<button class="btn btn-primary">Submit</button>
<button class="btn btn-default" type="reset">Reset</button>
</div>
</form>
</div>
</body>

<script>
$("#file-3").fileinput({
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any"
});
</script>

&nbsp;

</html>

La clave esta en la etiqueta y el script

<input id="file-3" type="file" multiple=true>

<script>
$("#file-3").fileinput({
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any"
});
</script>

Ademas tienes una completa documentación en el siguiente enlace:https://github.com/kartik-v/bootstrap-fileinput

You may also like...