How to preview image in the website using javascript?

Previewing image using javascript

In this blog you will learn that how to preview image  in the website using javascript

1- This is our HTML page

	
<h2>Choose image to preview</h2>
    
    <input type="file" id="header-image" >
    <div width="200" height="40"></div>
    

2-This is our JavaScript code 

	
    var file = document.getElementById("header-image");
            file.addEventListener('change', function () {
                var image = this.files[0];
                var url = URL.createObjectURL(image );
                var pic = new Image();
                pic.src = url;
                document.querySelector("div").append(pic);
            });
    

Output