1

boa tarde amigos. Estou utilizando JQuery para assim que receber a imagem pelo input "file", mandá-la para a tag img colocada próxima à ele, porém, quero que apareça a imagem somente depois de carregada... Se eu coloco as proporções em que a imagem deve aparecer após carregada, as bordas da tag ficam aparecendo mesmo sem imagem alguma

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

/*Parte JQuery que envia a imagem para a tag*/
<script>
$(function(){
    $('#input_preview').change(function(){
        const file = $(this)[0].files[0]
        const fileReader = new FileReader()
        fileReader.onloadend = function(){
            $('#img_preview').attr('src',fileReader.result)
        }
        fileReader.readAsDataURL(file);
    })
})
</script>
 /*  css  */
.imagem_prepost img{
  width: 90px;
  height: 100px;
  border-radius: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form  method="post" class="form-group">

  <div class="imagem_prepost">
      <img id="img_preview" alt=""> 
  </div>
  
  <div class="botoes_postar" style="display:flex;">
      <input name="arquivo" id="input_preview" type="file" />
      <button type="submit">Postar</button>
  </div>
  
</form>

2 Respostas 2

2

Você pode usar .show() do jQuery para exibir a tag img. Primeiro você precisa adicionar display: none; à imagem para ela ficar escondida por padrão. Depois, no seu evento de onloadend basta exibir a tag img usando .show().

Veja o exemplo a seguir:

/*Parte JQuery que envia a imagem para a tag*/
$(function(){
    $('#input_preview').change(function(){
        const file = $(this)[0].files[0]
        const fileReader = new FileReader()
        fileReader.onloadend = function(){
            // adicionando .show() ao preview da imagem
            $('#img_preview').attr('src',fileReader.result).show();
        }
        fileReader.readAsDataURL(file);
    })
})
/*  css  */
.imagem_prepost img{
  width: 90px;
  height: 100px;
  border-radius: 0;
  /* deixando a imagem escondida */
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form  method="post" class="form-group">

  <div class="imagem_prepost">
      <img id="img_preview" alt=""> 
  </div>
  
  <div class="botoes_postar" style="display:flex;">
      <input name="arquivo" id="input_preview" type="file" />
      <button type="submit">Postar</button>
  </div>
  
</form>

Adicionalmente, você pode fazer a verificação se o arquivo existe ou não e usar .hide() caso não exista. Veja o exemplo a seguir:

$(function(){
  $('#input_preview').change(function(){
      const file = $(this)[0].files[0]

      const fileReader = new FileReader()

      // Se algum arquivo foi passado
      if (file) {
         $('#img_preview').show();
         fileReader.readAsDataURL(file);
      }
      // Se não foi passado nenhum arquivo
      else $('#img_preview').hide();


      fileReader.onloadend = function(){
          $('#img_preview').attr('src',fileReader.result);
      }
  })
})
/*  css  */
.imagem_prepost img{
  width: 90px;
  height: 100px;
  border-radius: 0;
  /* deixando a imagem escondida */
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form  method="post" class="form-group">

  <div class="imagem_prepost">
      <img id="img_preview" alt=""> 
  </div>
  
  <div class="botoes_postar" style="display:flex;">
      <input name="arquivo" id="input_preview" type="file" />
      <button type="submit">Postar</button>
  </div>
  
</form>

8
  • valeu mano, quebrou o maior galho... só mais uma pergunta... qual evento eu poderia adicionar caso a foto que ele escolhesse fosse a errada ou se ele desistisse de colocar a foto? tipo um botãozinho de "x" pra retirar a imagem... como eu o faria? Commented 7/05/2019 às 3:36
  • 1
    Se vocẽ for colocar um botão de x, basta adicionar um evento de .click() no botão e dentro do evento aplicar o .hide(). Dessa forma: $("#botao").click(function(){ $('#img_preview').hide(); });. E você pode colocar para esse botão aparecer somente quando a imagem for selecionada, igual fez com a div de preview. Commented 7/05/2019 às 11:24
  • valeu mano! acabei de usar aqui... Commented 12/05/2019 às 17:19
  • 1
    Isso depende de como você faz para indicar que o post possui uma foto. Pode dizer como está fazendo isso? Commented 14/05/2019 às 12:13
  • 1
    Tanto o php quanto o código que manda a requisição pro servidor Commented 27/05/2019 às 21:16
1

Você pode adicionar uma classe pra esconder a div, e remover ou adicionar caso seja selecionado uma imagem. Caso não selecionar nenhuma imagem, a div irá desaparecer novamente.

/** javascript */
$(function(){
    $('#input_preview').change(function(){
        const container = $('.imagem_prepost');
        const image = $('#img_preview');

        const file = $(this)[0].files[0]

        if (file) {
            const fileReader = new FileReader()
            fileReader.onloadend = function(){
                image.attr('src',fileReader.result)
            }
            fileReader.readAsDataURL(file);
        }

        file ? container.removeClass('hide') : container.addClass('hide');
    })
})

/** css */
.imagem_prepost img{
  width: 90px;
  height: 100px;
  border-radius: 0;
}

.hide {
    display: none;
}
1
  • opa, valeu pela dica tb mano!!! assim como o mauro, quebrou um "galhão"!! Commented 7/05/2019 às 3:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .