Ir ao conteúdo
  • Cadastre-se

preview de imagens


Posts recomendados

     Bom dia, estou desenvolvendo um cadastro em php e quero fazer um preview de imagens, em php ou javascript, nada muito elaborado, a Pessoa seleciona a imagem e instantaneamente ela aparece logo abaixo do input, após isso continua com a inserção dos outros campos do formulário.

 

Todos os campos estão sendo validados com $_SESSION, se existir a $_SESSION faz alguma coisa, no caso da imagem, se existir $_SESSION['foto'] ele mostra o campo imagem e é neste campo que eu quero exibir a pré-visualização da imagem. uma miniatura de 100x100. 

<label class="line">
  <span class="data">Foto:</span>
  <input type="file" class="fileinput" name="foto" size="60" style="cursor:pointer; background:#FFF;" />
<?php
if(isset($_SESSION['foto'])){
echo '<img style="width:100px;height:100%;float:left;vertical-align:middle;margin-top:5px;" ';
echo 'src="" "/>';
unset($_SESSION['foto']);	
}else{}
?>
</label>

 

Link para o post
Compartilhar em outros sites

     Boa tarde Pessoal, achei um código que resolve o problema, funciona perfeitamente, porém, a foto não é obrigatório o Usuário colocar, e com o código que eu achei, preciso deixar uma div com o campo imagem aparecendo, e quando o Usuário carrega a imagem mostra na tela antes de fazer o upload, eu quero deixar o input normal e só aparecer a imagem quando ela for selecionada pelo Usuário, caso contrario só ficaria aparente o input mesmo, alguém consegue me ajudar?

 

     Segue o código.

<script>
  function readURL(input, id) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('#'+id)
          .attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
</script>

<label class="line">
  <span class="data">Foto:</span>
  <input type="file" class="fileinput" name="foto" size="60" onchange="readURL(this,'mini_foto_new');" style="cursor:pointer; background:#FFF;" />
  <div style="width:100px;height:100px;float:left;margin-top:5px;">
    <img id="mini_foto_new" style="width:100px;height:100%;float:left;vertical-align:middle;margin-top:5px;" src="" />
  </div>
</label>

 

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!