Others

Others


Display image after selecting file using JavaScript


We have to display image after selecting file in input(type='file') using JavaScript.We can preview input file(image) with following 'readURL' user defined JavaScript function.The Preview action executed when input 'onchange' event trigged.

Example 
<!DOCTYPE html>
<html>
<body>
  <h1>Preview an Image Before is it Uploaded.</h1>
  <p>Browse Image : <input type='file' accept='image/*'  onchange="readURL(this)" ></p>
  <img src="" alt="No Image" id="img" style='height:150px;'>
  
  <script>
  function readURL(input) {
    if (input.files && input.files[0]) {
    
      var reader = new FileReader();
      reader.onload = function (e) { 
        document.querySelector("#img").setAttribute("src",e.target.result);
      };

      reader.readAsDataURL(input.files[0]); 
    }
  }
  </script>
</body>
</html>
Try it Yourself

Live Demo