Javascript Example to Select Image From HTML5 Form and Preview it Live in Browser

SOURCE CODE

index.html

<form>
    <input type="file" id="image-input" onchange="previewImage()">
    <img id="image-preview" src="#" alt="image preview">
  </form>
  
  <script>
    function previewImage() {
      var input = document.getElementById('image-input');
      var preview = document.getElementById('image-preview');
  
      var reader = new FileReader();
      reader.onload = function() {
        preview.src = reader.result;
      }
  
      if (input.files && input.files[0]) {
        reader.readAsDataURL(input.files[0]);
      }
    }
  </script>

<form>

</form>

function previewImage() {

var input = document.getElementById('image-input');

var preview = document.getElementById('image-preview');

var reader = new FileReader();

reader.onload = function() {

preview.src = reader.result;

}

if (input.files && input.files[0]) {

reader.readAsDataURL(input.files[0]);

}

</script>

As you can see in the above code we have a simple html5 form where the user can select the image file and then we can live preview it as shown below