How to preview an image before and after upload in HTML and JavaScript?



To preview an image before and after upload, you need to try the following code − HTML


       new image

The following is the jQuery −

function display(input) {
   if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(event) {
         $('#myid').attr('src', event.target.result);
      }
      reader.readAsDataURL(input.files[0]);
   }
}

$("#demo").change(function() {
   display(this);
});
Updated on: 2020-06-25T07:01:37+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements