How do I preview an image before it is uploaded

Jak
Jak
Member
404 Points
167 Posts

I want to preview an image before it is uploaded to the server side. The preview action should be executed all in the browser without using any Ajax to upload the image.

How can I achieve it?

Views: 373
Total Answered: 1
Total Marked As Answer: 0
Posted On: 21-May-2021 23:44

Share:   fb twitter linkedin
Answers
beginer
beginer
290 Points
80 Posts
         

Use following:

Html:

<input type="file" id="Upload_Image" name="Upload_Image"/>
<img id="Upload_Image_Preview"/>

Script:

$(document).ready(function () {
    document.getElementById('Upload_Image').onchange = function () {
        var src = URL.createObjectURL(this.files[0]);
        if (src) {
            document.getElementById('Upload_Image_Preview').src = src;
            $(this).css("display", "none");
        }
    }
});
Posted On: 25-May-2021 22:49
 Log In to Chat