Upload File on Image control Click using jQuery in ASP.Net

Hi George616,

Check this example. Now please take its reference and correct your code.

HTML

<asp:FileUpload ID="fuUpload" runat="server" Style="display: none" />
<asp:Button ID="btnUpload" runat="server" Style="display: none" OnClick="OnUpload" />
<asp:Image ID="imgFileUpload" ImageUrl="Test.png" runat="server" />
<asp:Image ID="imgPreview" runat="server" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var fileUpload = $("[id*=fuUpload]");
        var img = $("[id*=imgFileUpload]");
        img.click(function () { fileUpload.click(); });
        fileUpload.change(function () {
            $('[id*=btnUpload]').click();
        });
    });
</script>

Code

C#

protected void OnUpload(object sender, EventArgs e)
{
    if (!System.IO.Directory.Exists(Server.MapPath("~/Files")))
    {
        System.IO.Directory.CreateDirectory(Server.MapPath("~/Files"));
    }
    fuUpload.PostedFile.SaveAs(Server.MapPath("~/Files/") + System.IO.Path.GetFileName(fuUpload.PostedFile.FileName));
    imgPreview.ImageUrl = "~/Files/" + System.IO.Path.GetFileName(fuUpload.PostedFile.FileName);
}

VB.Net

Protected Sub OnUpload(ByVal sender As Object, ByVal e As EventArgs)
    If Not IO.Directory.Exists(Server.MapPath("~/Files")) Then
        IO.Directory.CreateDirectory(Server.MapPath("~/Files"))
    End If
    fuUpload.PostedFile.SaveAs(Server.MapPath("~/Files/") & IO.Path.GetFileName(fuUpload.PostedFile.FileName))
    imgPreview.ImageUrl = "~/Files/" + IO.Path.GetFileName(fuUpload.PostedFile.FileName)
End Sub

Screenshot