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

Executar algo depois do de uma imagem ter carregado

Imagine assim: 2 elementos na tela. Um sendo uma div com uma imagem de background e outro sendo outra div apenas com uma cor setada via css.

Quem carrega primeiro? A div de cor chapada lógico. Ela não precisa de uma imagem externa.

E se, por alguma razão, precisar que ela apareça depois do load da imagem na primeira div?

O CÓDIGO:

$('< img / >').attr('src', '/static/site/css/img/SUA_IMAGEM.png').load(function() {
    $('div.bg').css('background-image', 'url(/static/site/css/img/SUA_IMAGEM.png)');
    $('div.bg').show();
    // o que mais tiver que fazer
});

LEMBRE DE REMOVER OS ESPAÇOS DESNECESSÁRIOS NO PRIMEIRO SELETOR DA PRIMEIRA LINHA. 

 Coloquei com espaços pois senão o editor do blog some com os caracteres.

Validar formulário quando Enter for pressionado

O Código:


$('input,select').keypress(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
$(this).parents('form').find('div.bt-enviar').trigger('click');
}
});


A Explicação:

Para todos os inputs e selects (fique livre para adicionar outros campos caso seu form os tenha), é criado um listener para capturar a tecla pressionada. Quando o keyCode  for igual a 13 (enter), chamará o evento definido no onclick do seu botão submit, no caso acima, é uma div com a classe bt-enviar.

MeioMask: Um Plugin JQuery muito útil para máscaras de campos

Para fazer máscaras para campos que possuem um padrão definido, como por exemplo cpf, telefone, cep, etc, utilizo este plugin para facilitar a vida.

Ele está disponível aqui:
https://github.com/zejuniortdr/jquery.meiomask.9digito

Depois de adicioná-lo em sua página, basta criar um arquivo de iniciliação como o a seguir:

 /* Mascaras pre-existentes*/
/*$.mask.masks : {
 'phone'     : { mask : '(99) 9999-9999' },
 'phone-us'  : { mask : '(999) 9999-9999' },
 'cpf'       : { mask : '999.999.999-99' },
 'cnpj'      : { mask : '99.999.999/9999-99' },
 'date'      : { mask : '39/19/9999' }, //uk date
 'date-us'   : { mask : '19/39/9999' },
 'cep'       : { mask : '99999-999' },
 'time'      : { mask : '29:69' },
 'cc'        : { mask : '9999 9999 9999 9999' }, //credit card mask
 'integer'   : { mask : '999.999.999.999', type : 'reverse' },
 'decimal'   : { mask : '99,999.999.999.999', type : 'reverse', defaultValue: '000' },
 'decimal-us'    : { mask : '99.999,999,999,999', type : 'reverse', defaultValue: '000' },
 'signed-decimal'    : { mask : '99,999.999.999.999', type : 'reverse', defaultValue : '+000' },
 'signed-decimal-us' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue : '+000' }
}
*/

 /* Mascaras personalizadas */
$.mask.masks = $.extend($.mask.masks,{
    msk:{ mask: '999-999' },
    other_msk:{ mask: '6666' },
    another_one:{ mask: '7777' , type:'reverse' },
    dose:{ mask: '99'},
    termina_em:{ mask: '39/19/9999', autoTab:false },
    phone_9digito:{ mask: '(99) 99999-9999'}
});

(function($){
 $(function(){
  $('input:text').setMask();
  var ddds = ['11) 9','12) 9','13) 9','14) 9','15) 9','16) 9','17) 9','18) 9','19) 9','21) 9','22) 9','24) 9','27) 9','28) 9'];

  // SP 11 - 19
  // RJ 21,22,24
  // ES 27,28

  $('#id_telefone, #id_celular, #id_celular_validacao, #id_telefone').keydown(function(event) {
   if( procura_no_array($(this).val().substring(1,6), ddds) >= 0){
    $(this).attr('alt','phone_sp');
   }else{
    $(this).attr('alt','phone');
   }
   $(this).setMask();
  });
 });

})(jQuery);

No comentário acima, é possivel verificar alguns dos tipos disponíveis deste plugin, e se caso achar necessário pode-se criar novas máscaras como pode ser visto logo abaixo do bloco comentado. O init normal resume-se a apenas a instrução  $('input:text').setMask(); chamada no onload da página.

Com a nova norma da Anatel, os celulares de São Paulo receberam o número 9 a frente dos 8 dígitos já existentes, e uma personalização para tal foi necessária no plugin. No evento onkeypress de todos os campos telefones e celulares, caso o DDD tenha o nono dígito, será aplicado a máscara personalizada "phone_9digito", caso contrário a máscara normal de telefone ("phone") será aplicada.

Para aplicação de qualquer máscara em seus inputs, basta colocar a identificação da máscara no atributo alt do input. Como no exemplo abaixo:

<input alt="phone_9digito" class="input2" id="id_telefone" name="telefone" placeholder="Telefone" type="text" value="" />