Preview uploaded file and Hide ASP.Net Image control using jQuery

Hi nauna,

Refer below code.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            $("#fuUpload").change(function () {
                if (typeof (FileReader) != "undefined") {
                    var dvPreview = $("#dvPreview");
                    dvPreview.html("");
                    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                    $($(this)[0].files).each(function () {
                        var file = $(this);
                        if (regex.test(file[0].name.toLowerCase())) {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                var img = $("<img />");
                                img.attr("style", "height:100px;width: 100px");
                                img.attr("src", e.target.result);
                                dvPreview.append(img);
                            }
                            $("#Image1").hide();
                            reader.readAsDataURL(file[0]);
                        } else {
                            alert(file[0].name + " is not a valid image file.");
                            dvPreview.html("");
                            return false;
                        }
                    });
                } else {
                    alert("This browser does not support HTML5 FileReader.");
                }
            });
        });
    </script>
    <asp:FileUpload ID="fuUpload" runat="server" />
    <asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick="Upload" />
    <asp:Image ID="Image1" runat="server" ImageUrl="~/Chrysanthemum.jpg" CssClass=" pull-right"
        Width="30%" />
    <hr />
    <div id="dvPreview">
    </div>
</div>

Code

protected void Upload(object sender, EventArgs e)
{
    fuUpload.SaveAs(Server.MapPath("~/Uploads") + "/" + System.IO.Path.GetFileName(fuUpload.PostedFile.FileName));
}