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');
 }
});

Configurando Apache no OS Yosemite para funcionar LOCALHOST na pasta Sites

Abra o arquivo /etc/apache2/httpd.conf com o editor de sua preferencia:

sudo nano /etc/apache2/httpd.conf

E deixe como a seguir, configurando o caminho para seu suarios

DocumentRoot "/Users/myusername/Sites"

<Directory "/Users/myusername/Sites">

    Options Indexes FollowSymLinks Multiviews

    MultiviewsMatch Any

    AllowOverride All

</Directory>

Salve e reinicie o apache

sudo apachectl restart

Depois basta abrir o navegador e digitar http://localhost

hasta!