Mostrar una imagen antes de subirla html y javascript

Ejemplo:

 

 

1 - En nuestro html tendremos esto

<input id="file" type="file" />
<hr>
<div id="preview"></div>

2 - el javaScript

document.getElementById("file").onchange = function(e) {
  // Creamos el objeto de la clase FileReader
  let reader = new FileReader();

  // Leemos el archivo subido y se lo pasamos a nuestro fileReader
  reader.readAsDataURL(e.target.files[0]);

  // Le decimos que cuando este listo ejecute el código interno
  reader.onload = function(){
    let preview = document.getElementById('preview'),
            image = document.createElement('img');

    image.src = reader.result;

    preview.innerHTML = '';
    preview.append(image);
  };
}

pruebalo no seas timido!!!!