How to preview image before upload on ASP.NET master page content placeholder

Question

How do i preview image before upload on asp.net masterpage content placeholder using asp.net controls? I would prefer it to be automatically displayed after choosing a image from the file upload control.

Here's my code:

UploadPicture.aspx

<asp:Content ID="Content1" ContentPlaceHolderID="content" runat="server">

<div class="container">
    <div class="row">
        <div class="col-sm-3">

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

            <asp:Image ID="image" runat="server"/>

            <asp:TextBox ID="textBox1" runat="server"></asp:TextBox>

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

            <asp:Label ID="lb_msg" runat="server"></asp:Label>

        </div>
    </div>
</div>

Thanks!

Answer 1

The only way to preview the image before actual post to the server is using javascript file api. This task is not about serverside controls. You can read here about js fileapi.