Buenas tardes comunidad!
Necesito saber si existe la forma de utilizar una imagen cargada en un input file para previsualizarlo pero no en una etiqueta img, sino para poner la imagen como background-image de un div.
Antiguamente en el proyecto si cargaba la previsualización en un img de la siguiente forma
El input file
<div class="form-group">
<input id="file_url" type="file" name="foto">
</div>
<div class="card-carga hide" id="contenedor_noticia2">
<div class="card__father">
<div class="card">
<div class="card__front" id="fondo-card">
<div class="bg"></div>
<div class="body__card__front">
<h2 id="titulo_noticia2"></h2>
</div>
</div>
<div class="card__back">
<div class="body__card__back">
<p id="texto_noticia2"></p>
<a id="link_noticia2" href="#!" target="blank_" class="btn btn-primary" role="button">Leer más</a>
</div>
</div>
</div>
</div>
</div>
function mostrarImagen(input) {;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_destino2').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file_url").change(function(){
$('#contenedor_noticia').removeClass("hide");
$('#contenedor_noticia').addClass("show");
$('#contenedor_noticia2').removeClass("hide");
$('#contenedor_noticia2').addClass("show");
mostrarImagen(this);
});
Se me ocurrió con las siguientes opciones
$('#fondo-card').css("background-image", "url(e.target.result)");
$('#fondo-card').css("background-image", "url('e.target.result')");
var div= document.getElementById("div");
imagen.style.backgroundImage = "url('e.target.result')";
Saludos! Gustavo Duarte