HTML और JavaScript में अपलोड करने से पहले और बाद में किसी छवि का पूर्वावलोकन कैसे करें?

अपलोड से पहले और बाद में किसी छवि का पूर्वावलोकन करने के लिए, आपको निम्न कोड आज़माना होगा - HTML

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id = "form1" runat = "server">
   <input type ='file' id = "demo" />
   <img id = "myid" src = "#" alt = "new image" />
</form>

निम्नलिखित है 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);
});