Preview Image before upload using jQuery

In this article i am going to explain how to Preview Image before upload using jQuery.I have used html file upload method in this example.This preview image before upload method is very useful to see uploaded image is correct or not.

Live DemoDownload Script

FileReader() is used to read the contents of a file.

jQuery Function

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

onload() function is used to execute javascript after page load is finished.
attr is used to set values of select elements.
target is used to returns the element that triggered the event.

HTML file upload

<form name="imageupload" action="#" enctype="multipart/form-data">
  <input type="file" name="imgupload" id="imgupload" onChange="showimagepreview(this);" />
</form>

Preview image before upload

<img id="imgview" style="max-width: 160px; max-height: 120px; border: 1px solid #ccc;"/>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.