এইচটিএমএল এবং জাভাস্ক্রিপ্টে আপলোডের আগে এবং পরে একটি চিত্র কীভাবে প্রিভিউ করবেন?

আপলোডের আগে এবং পরে একটি চিত্রের পূর্বরূপ দেখতে, আপনাকে নিম্নলিখিত কোডটি চেষ্টা করতে হবে - 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);
});