<div>
  <p>Base64 by readAsDataURL</p>
  <input type="file" accept="image/*" onchange="loadFile1(event)">
  <img id="output1"/>
</div>
<hr/>
<div>
  <p>URL.createObjectURL</p> 
  <input type="file" accept="image/*" onchange="loadFile2(event)">
  <img id="output2"/>
</div>

var loadFile1 = function(event) {
  var reader = new FileReader();
  reader.onload = function(){
    var output = document.getElementById('output1');
    output.src = reader.result;
  };
  reader.readAsDataURL(event.target.files[0]);
};

var loadFile2 = function(event) {
  var output = document.getElementById('output2');
  output.src = URL.createObjectURL(event.target.files[0]);
  output.onload = function() {
    URL.revokeObjectURL(output.src) // free memory
  }
};