1

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&aacute;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

9
  • Sí, seguramente existe. ¿que has investigado al respecto? ¿que has intentado? Por favor, léete Cómo preguntar donde lo primero que dicen es "Busca e investiga", y no parece que lo hayas hecho. De paso léete recorrido de bienvenida y ejemplo mínimo verificable para aprender el funcionamiento correcto del sitio, gracias!
    – masterguru
    el 18 oct. 2022 a las 17:53
  • Actualice la pregunta, gracias! el 18 oct. 2022 a las 18:06
  • Muy bien, gracias. Pon tambien el input file y el div, es decir, el HTML que se necesita para poder reproducir tu escenario, gracias.
    – masterguru
    el 18 oct. 2022 a las 18:13
  • Ya puse el html, gracias el 18 oct. 2022 a las 18:21
  • Bien, ejem... ¿y donde está img_destino2? entiendo que es el div destino o una imagen contenida en el más bien
    – masterguru
    el 18 oct. 2022 a las 18:23

1 respuesta 1

0

Puedes hacerlo así:

const [archivo_imagen] = file_url.files
if (archivo_imagen) {
    $("#fondo-card").css("background-image", "url(" + URL.createObjectURL(archivo_imagen) + ")");
}

donde asignamos a la constante archivo_imagen un objeto del tipo FileList al archivo que se pretende subir mediante files, y luego, mediante URL.createObjectURL sacamos su ruta temporal para agregarla al css background-image usando el método css de jquery

Ejemplo:

$("#file_url").change(function() {
//  $('#contenedor_noticia').removeClass("hide");
//  $('#contenedor_noticia').addClass("show");
  $('#contenedor_noticia2').removeClass("hide");
  $('#contenedor_noticia2').addClass("show");

  const [archivo_imagen] = file_url.files
  if (archivo_imagen) {
    $("#fondo-card").css("background-image", "url(" + URL.createObjectURL(archivo_imagen) + ")");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<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" style="width:200px;height:200px;">
        <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&aacute;s</a>
        </div>
      </div>
    </div>
  </div>
</div>

2
  • Funciono perfectamente, muchas gracias por la ayuda ! masterguru ;) el 18 oct. 2022 a las 18:49
  • Un placer ayudar cuando la colaboración es mútua :-) Lamento haberte hecho sudar pidiéndote los datos, pero para dar una buena respuesta la pregunta debe ser también completa. Saludos!
    – masterguru
    el 18 oct. 2022 a las 18:50

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.