Preview selected image using HTML5

Before HTML 5 showing the preview of the image was a very expensive operation because the website makes a service call to get the image. Which puts extra load on the server. But after the release of HTML5, it’s becoming very easy to show the preview of this image without making any service call.

In this post, I will share you a very clean way to show the preview of the image using HTML 5 FileReader API.

<div id="app"></div>  
  
<img id="uploadPreview" style="width: 100px; height: 100px;" />  
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />  
  
<script type="text/javascript">  
    function PreviewImage() {  
        var oFReader = new FileReader();  
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);  
        oFReader.onload = function (oFREvent) {  
            document.getElementById("uploadPreview").src = oFREvent.target.result;  
        };  
    };  
</script>

DEMO