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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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