Submit Post - Article - Ask a Question - Ask an Interview Question - Submit Useful Links

Preview an image before it is uploaded in Jquery

How to Preview image before it is uploaded or how to view image on choose.

By      07-Nov-2023    2

Solutions


Adil Shahbaz

Here is the code of preview image before it is uploaded.

Please make sure you have already added jquery reference.

function readImageUrl(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#previewImg').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#uploadedImg").change(function() {
  readImageUrl(this);
});


<input type='file' id="uploadedImg" />
  <img id="previewImg" src="#" alt="Your Image" />

Your Answer

10021
Submit Post - Article - Ask a Question - Ask an Interview Question - Submit Useful Links