Preview an image before it is uploaded

FOor example, Preview an image before it is uploaded...

Demo

Upload your image here

HTML

<form id="imgForm" runat="server">
    <input type='file' id="imgFile" />
    <img id="img" src="#" alt="Upload your image here" />
</form>

Javascript

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

Copyright 2024 by WebiBeris.com. All Rights Reserved.