Input File con vista previa de la imagen
Personalizar el botón de carga con vista previa de la imagen
Input File con vista previa de la imagen. En desarrollos de sistemas en algún modulo se requiere la carga de imágenes y mejor aun con una vista previa de la imagen.
Reemplazaremos la carga por defecto de HTML por otro mas elegante y usando vista previa de carga de imagen.
Input File con vista previa de la imagen
Como se muestra en la imagen, primero se muestra el botón Agregar. Luego, una vez que se selecciona una imagen, se muestra una vista previa.
Este es el código que se utilizo:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imagePreview" src="http://via.placeholder.com/350x150" alt="placeholder image goes here"></div>
<input id="uploadFile" type="file" name="image" class="img" />CSS
#imagePreview {
width: 180px;
height: 180px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
background-image: url('http://via.placeholder.com/350x150');
}
#uploadFile{
display: none
}jQuery
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
$('#imagePreview').click(function(){
$('#uploadFile').click();
});Detalles del script anterior.- Lo que haremos es cumplir estos 3 puntos claves para lograr nuestro objetivo
- Ocultar input file por defecto
- Adjuntar la funcion
.onclick()al marcador de posición de la imagen - Activar el clic de entrada manualmente
Segundo método: Previsualización carga de imagen
Vamos a utilizar la etiqueta <label> para representar y decorar nuestro input file tradicional.
A continuación, se muestra una demostración sencilla:
$('#file1').on('change', function() {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test(files[0].type)) { // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function() { // set image data as background of div
$('img').attr('src', reader.result).removeClass('default')
}
}
})CSS
#file1 {
display: none;
}
img {
cursor: pointer;
width: 200px;
height: 200px;
}
img.default {
border: 2px gray dashed;
padding: 50px;
height: 150px;
width: 150px;
}HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file1">
<label for="file1">
<img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/plus_alt-256.png" class="default" alt="">
</label>Para resumir, podemos dinamizar la funcion de jQuery usando ciclos for o foreach y de ese modo generar múltiples campos para cargar imágenes con vista previas.
