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

rake db:migrate - couldn't parse YAML

Colocando um projeto em Rails 3.1 em produção, tive um problema novo, que me custou uma meia hora para resolver:  $ rake db:migrate RAILS_ENV=production  rake aborted!  couldn't parse YAML at line 20 column 16  Tasks: TOP => db:migrate => environment  (See full trace by running task with --trace) Doideira! Nunca tinha visto isso. Numa busca mais ou menos rápida, encontrei  este tópico no StackOverFlow , no qual a resposta do  vicvega  resolveu meu problema. Ele diz para adicionar duas linhas ao config/boot.rb:  require 'yaml'  YAML::ENGINE.yamler= 'syck' Em desenvolvimento não percebi o problema. Então, fiz assim: if ENV['RAILS_ENV'] == 'production'   require 'yaml'   YAML::ENGINE.yamler= 'syck' end E ficou perfeito. Mas há outras causas prováveis para o problema.  As versões em uso:  ruby 1.9.2p180 (2011-02-18 revision 30909) [x86_64-linux]  Rails 3.1.0.rc4  Rake 0.9.2
Leia mais

E-mails como SMS em um Nextel

Após questionar o atendimento ao cliente Nextel, me foi dito que não havia como enviar um SMS para um endereço de e-mail e nem receber um SMS enviado de um endereço de e-mail diretamente no celular. Achei estranho, pois, quando utilizei por uma empresa o serviços Nextel, utilizava este recurso exatamente desta forma. Como não houve boa vontade por parte deles, resolvi testar e ver o que acontecia. Então, cadastrei meu endereço de e-mail num contato e fui criar uma nova mensagem. No campo destinatário, selecionei o endereço de e-mail e redigi normalmente o texto, clicando em enviar em seguida. A mensagem foi enviada sem qualquer erro. Quando fui checar o e-mail, lá estava a mensagem enviada pelo telefone. Eu a respondi e chegou poucos segundos depois no telefone. O endereço de e-mail utilizado fica no seguinte formato: código do pais + código de area + número do telefone @mmsnextel.com.br Ex. 552178880000@mmsnextel.com.br Acredito que funcione para todos os usuários que tenham o serviço...
Leia mais

E-mail falso faz cobrança de conta em nome da Vivo e envia vírus

Imagem
Esse é fresquinho. Recebi hoje por e-mail e trata-se uma mensagem falsa tenta enganar o usuário informando uma dívida em seu nome. Os links levam para o arquivo executável de Windows pendencias.exe , na url http://www.freewebtown.com/notificacao/ , não o executei, mas tenho certeza de que não deve ser um programa interessante para quem utiliza este sistema. Não tente baixar este arquivo! Como uso Linux, meu computador é imune a este tipo de coisa, o que faz com que não me preocupe com nada disso há anos. ;-) É uma mensagem de má qualidade e dificilmente uma pessoa atenta cairá neste golpe, mas vale ficar atento. As empresas, atualmente não enviam cobranças ou notificações de execução ou coisa parecida, salvo no caso de empresas com atividades na internet. Você certamente vai receber várias ofertas e promoções imperdíveis, mas cobrança só em casos especificos e, assim mesmo, você vai perceber uma qualidade bem diferente nas mensagens, sem contar que você saberá da divida, não é mesmo? ...
Leia mais