HTML और JavaScript में अपलोड से पहले और बाद में इमेज प्रीव्यू कैसे करें?

इमेज प्रीव्यू

अपलोड से पहले और बाद में इमेज प्रीव्यू करने के लिए, आपको निम्नलिखित कोड आज़माने की आवश्यकता है:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="demo" />
  <img id="myid" src="#" alt="new image" />
</form>

jQuery

function display(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(event) {
            $('#myid').attr('src', event.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#demo").change(function() {
    display(this);
});

FileReader API फ़ाइल चयन के तुरंत बाद क्लाइंट-साइड इमेज प्रीव्यू सक्षम करता है।