quinta-feira, 27 de novembro de 2014

Preview imagem antes do upload sem distorcer na exibição

Requisitos: JQUERY HTML:

...
<input type="file" name="imagem_upload" id="id_foto">
<div id="img2"></div>
...


CSS:

 #img2 {
    width: 80px; height: 80px;
    background: url(imagem-padrao.jpg) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 50%; left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    border: 5px solid #fff;
    z-index: 1;
}


JAVASCRIPT:

$('#id_foto').live('change', function(){
 var input = document.getElementById("id_foto");
 var fReader = new FileReader();
 fReader.readAsDataURL(input.files[0]);
 fReader.onloadend = function(event){
  $("#img2").css('background', 'url('+event.target.result+') no-repeat center center');
  $("#img2").css('background-size', 'cover');
 }
});