Show (Display) image preview using jQuery inside ASP.Net Image control

tareq16278
 
on Aug 09, 2022 11:39 PM
Sample_175439.zip
436 Views

just fileupload click display image preview

<asp:FileUpload ID="FileUpload1" runat="server" />    
<asp:Image ID="Image1" runat="server" />

I know very little coding so I won't understand small code.

Can a little coding please solve the problem?

protected void Page_Load(object sender, EventArgs e)
{

}
Download FREE API for Word, Excel and PDF in ASP.Net: Download
PrinceG
 
on Aug 10, 2022 01:38 AM

Hi tareq16278,

Please refer below sample.

HTML 

<asp:FileUpload ID="fuUpload" runat="server" />
<hr />
<asp:Image ID="imgPreview" runat="server" style="height: 100px; width: 100px; display: none;" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(function () {
        $("#fuUpload").change(function () {
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            if (regex.test($(this).val().toLowerCase())) {
                if (typeof (FileReader) != "undefined") {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#imgPreview").show();
                        $("#imgPreview").attr("src", e.target.result);
                    }
                    reader.readAsDataURL($(this)[0].files[0]);
                } else {
                    alert("This browser does not support FileReader.");
                }
            }
        });
    });
</script>

Screenshot