How do I preview an image before it is uploaded

Jak
Jak
Member
398 Points
164 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: 52
Total Answered: 1
Total Marked As Answer: 0
Posted On: 21-May-2021 23:44

Share:   fb twitter linkedin
Answers
beginer
beginer
236 Points
68 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