Display Image in asp.net C# web form after click file upload using Javascript

Javascript:

<script type="text/javascript">

    function previewFile() {

        var preview = document.querySelector('#<%=Avatar.ClientID %>');

        var file = document.querySelector('#<%=avatarUpload.ClientID %>').files[0];

        var reader = new FileReader();

        reader.onloadend = function () {

            preview.src = reader.result;

        }

        if (file) {

            reader.readAsDataURL(file);

        } else {

            preview.src = "";

        }

    }

    </script>

 .aspx page code:

    <p>

        <asp:Image ID="Avatar" runat="server" Height="225px" ImageUrl="~/Images/NoUser.jpg" Width="225px" />

    </p>

    <p>

        <input ID="avatarUpload" type="file" name="file" onchange="previewFile()"  runat="server" />

        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload"/>   

    </p>

Open a .aspx page on a new tab in asp.net button click event using javascript

Code For .aspx page:

<asp:Button ID="btnAbout" runat="server" Text="About" onclick="btnAbout_Click" OnClientClick="return PostToNewWindow();"/>

Java Script Function:

<script type="text/javascript">

    function PostToNewWindow() {

        originalTarget = document.forms[0].target;

        document.forms[0].target = '_blank';

        window.setTimeout("document.forms[0].target=originalTarget;", 300);

        return true;

    }

</script>

Code in .cs Page For Button Click:

protected void btnAbout_Click(object sender, EventArgs e)

{

Response.Redirect("~/About.aspx");

}

That's It.