Preview An Image Before It Is Uploaded Using Jquery

For More Videos Visit Our YouTube Channel

Preview An Image Before It Is Uploaded

Here we consider how to Preview An Image Before It Is Uploaded. Lets start with one example here. Suppose we have one File Uploader for uploading image. We wants to show the preview of this uploaded image on HTML image.



We have attached one Onchange Event with the File Upload Selector. Inside JavaScript, we can write following code for previewing this selected image.

function PreviewImage(event) {
   var preview = document.getElementById('PreviewImageID');
   preview.src = URL.createObjectURL(event.target.files[0]);
};



The Result can be as shown below.