1

Hola buenas una pregunta tengo este código de Jquery pero a la hora de cargar la interfaz me muestra un cuadro como que no hay imagen y no sé cómo quitarlo, para que solo aparezca cuando se suba la imagen.

<div class="form-group col-md-4">
                    <label>Subir imagen</label>
                    <input type="file" class="form-control-file" id="foto" name="foto" id="fotoPrincipal" accept="image/*" >
                    <input type="hidden" class="form-control" name="imagenActual" id="imagenActual">
                </div>
                <div class="form-group col-md-12" >
                    <img src="" width="150px" height="120px" id="previsualizarImagenes">
                </div>
function readURL(input){
    if(input.files && input.files[0]){
      var reader = new FileReader();
      reader.onload = function(e){
        //asignar el atributo src.

        $('#previsualizarImagenes').attr('src', e.target.result)
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  //Se asigna el listener al input
  $('#foto').change(function(){
    readURL(this);
  });

introducir la descripción de la imagen aquí

1 respuesta 1

1

Usar la propiedad .css("display", "estado") de JQuery puede ser una buena opción:

function readURL(input){
    if(input.files && input.files[0]){
      var reader = new FileReader();
      reader.onload = function(e){
        //asignar el atributo src.
        $("#previsualizarImagenes").css("display", "block");
        $('#previsualizarImagenes').attr('src', e.target.result)
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  //Se asigna el listener al input
  $('#foto').change(function(){
    readURL(this);
  });
<div class="form-group col-md-4">
                    <label>Subir imagen</label>
                    <input type="file" class="form-control-file" id="foto" name="foto" id="fotoPrincipal" accept="image/*" >
                    <input type="hidden" class="form-control" name="imagenActual" id="imagenActual">
                </div>
                <div class="form-group col-md-12" >
                    <img src="" width="150px" height="120px" id="previsualizarImagenes" style="display:none;">
                </div>

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.