Question

Kindly help me with a solution to upload a image and display it client side. Simultaneously, I need to save the image in server without refreshing the entire page since, other controls are created dynamically using java script which will disappear when the entire page gets refreshed.

Solution Found:

<div>
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5">
<ItemTemplate>    
<div id="divImage" runat="server" onclick="Test()" class="draggable">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server" />
</div>
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server"/>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>

protected void BindDataList()
{
    DirectoryInfo dir = new DirectoryInfo(MapPath("MyImages"));
    FileInfo[] files = dir.GetFiles();
    ArrayList listItems = new ArrayList();
    foreach (FileInfo info in files)
    {
    listItems.Add(info);
    }
    dtlist.DataSource = listItems;
    dtlist.DataBind();

}

Answer 1

the most trivial solution maybe is using an iframe, containing the form, inside the page . When submitting the form only the iframe will be refreshed and not the whole page

otherwise you could send the base64 representation of your image to your server via ajax. This can be achieved in newer browser, loading the image in a <canvas> element and using toDataURL() method (see Get image data in JavaScript?)