Jquery Image Upload Preview

Pequeno código para fazer upload com pré-visualização de imagem.
Código completo disponível no CodePen: https://codepen.io/fernandokosh/pen/wyKjRR

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
  <form id="form1" runat="server">
    <input type='file' id="file-input" />
    <div id='img_contain'>
      <img id="image-preview" align='middle'src="http://www.clker.com/cliparts/c/W/h/n/P/W/generic-image-file-icon-hi.png" alt="your image" title=''/>
    </div>
  </form>
</body>

CSS:

body{
  background-color:#add8e6;
}
#img_contain{
  border:1px solid grey;
  margin-top:10px;
  width:520px;
}
#file-input{
  margin-left:7px;
  padding:10px;
  background-color:gray;
}
#image-preview{
  height:320px;
  width:auto;
  display:block;
  margin-left: auto;
  margin-right: auto;
  padding:5px;
}

JQuery:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#image-preview').attr('src', e.target.result);
      $('#image-preview').hide();
      $('#image-preview').fadeIn(650);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$("#file-input").change(function() {
  readURL(this);
});

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Bel Duarte Fotografia

Imagem
Este vem de uma série que foi desenvolvida logo após o Conscius . Possui um layout limpo, feito pelo Rafael Mahler, trabalhado em CSS, usando quase nada de imagens, feito sob medida para dar foco ao material exibido: As obras de arte eternizadas pelos cliques da Bel. "Trabalhar o meu olhar e clicar a emoção das pessoas é a minha grande paixão." Bel Duarte O código é Pré-PHPClassFE e utiliza muitas chamadas à objetos, mas a aplicação não é completamente OO. Visite: http://www.belduarte.com Referencias PHP http://www.php.net Smarty http://smarty.php.net MySQL http://www.mysql.com ADOdb http://adodb.sourceforge.net/
Leia mais

Como resolver 99% dos defeitos de mouse sem fio de qualquer fabricante

Imagem
O mouse parece estranho? Meio que falha quando é movido? A seta fica tremula e parece que vai cair da tela? O clique pega mais não pega? Parece que quando clica da uma falhada? A seta tem atraso em relação movimento do dispositivo na não? A solução é trocar as pilhas. 99% dos defeitos de mouse sem fio é causado por baixo nível de energia. O bom é tentar usar pilhas de melhor qualidade ou, se possível, baterias recarregáveis. Nos outros 1% dos casos, vale verificar se o receptor está conectado corretamente. Devido ao baixo preço deste tipo de equipamento, consertar fica praticamente fora de cogitação e ai o jeito é trocar o dispositivo.
Leia mais

Faz backup, cópia ou usa Git?

Imagem
  Fosse no tempo antes do controle de versão de verdade, por 4 vezes na era recente, eu teria perdido boa parte do trabalho. Isso graças a um membro de uma das equipes das quais faço parte. A pessoa não sabe usar as ferramentas e não tem a humildade de perguntar como se faz, já que não consegue aprender buscando  pela Internet. Antes dos controladores de versão, a gente fazia backups regulares do projeto todo e de arquivos específicos, dependendo das alterações. Isso, claro, gerava muitos problemas. Principalmente depois de um tempo, quando não se lembrava mais o porquê de tal cópia. Era bem comum apagar trechos de códigos importantes. Alguns editores ajudavam, fazendo cópias automáticas, mas assim mesmo, as perdas eram parte da rotina. Daí conheci primeiro o  CVS e cheguei a trabalhar com ele em alguns projetos. Parecia muito bom! Mas tinha seus problemas. Quando eu já conhecia o CVS a ponto de não gostar mais dele, conheci o SVN, que prometeu mais do que entregou, eu acho. Mas usando
Leia mais