Para realizar essa tarefa aconselho a usar alguma API como fileinput, conforme foi citado no link que você passou acima, pois já tem o CSS implementado e já está bem estável. Mais mesmo assim segue uma solução com uso do jQuery, se quiser só com JavaScript puro avise nos comentarios:
HTML:
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
JavaScript:
function leUrl(input) {
if (input.files && input.files[0]) { //verifica se o arquivo não está nulo
var reader = new FileReader(); //instancia um objeto FileReader que permite aplicações web ler o conteúdo dos arquivos (ou buffers de dados puros)
reader.onload = function (e) { //Este evento é chamado cada vez que a operação de leitura é completada com sucesso.
$('#blah').attr('src', e.target.result); //aqui seto a imagem no src da div a cima
}
reader.readAsDataURL(input.files[0]); //Inicia a leitura do conteúdo que caira após o peração completar na função a cima
}
}
$("#imgInp").change(function () { //aqui seto a função no evento de change do campo
leUrl(this);
});
Veja funcionando aqui :)
E se quiser arriscar algo diferente, está aqui a documentação do FileReader :)