How to upload and save a image into the server without refreshing the entire page

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();

}

score 2 · Answer 1 · answered Dec 20 '11 at 11:07

2

You will need to use Ajax for this.

answered Dec 20 '11 at 11:07

Sachin Kainth

45,256
81
201
304

Kindly provide a solution for the same since I am not much familiar with ajax. – psobhan Dec 20 '11 at 11:09

score 1 · Accepted Answer · edited May 23 '17 at 10:34

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?)

edited May 23 '17 at 10:34

Community

1
1

answered Dec 20 '11 at 11:13

Fabrizio Calderan

120,726
26
164
177

I tried to save the image in server using iframe (src) but let me know how to display the saved image without refreshing the page. – psobhan Dec 20 '11 at 11:58

score 0 · Answer 3 · edited Nov 17 '12 at 02:03

You can use ajax to send image(s) you want,

first get the image data :

var Pic = document.getElementById("myCanvas").toDataURL("image/png");

and send it to the server via ajax:

$.ajax({
        type: 'POST',
        url: 'Save_Picture.aspx/UploadPic',
        data: '{ "imageData" : "' + Pic + '" }',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            alert("Done, Picture Uploaded.");
        }
    });

and write a service on the server "Save_Picture.aspx/UploadPic" to read the image data:

byte[] data = Convert.FromBase64String(imageData);

score 0 · Answer 4 · answered Dec 20 '11 at 11:14

0

Check out http://www.phpletter.com/Our-Projects/AjaxFileUpload/

answered Dec 20 '11 at 11:14

Kurt

7,102
2
19
16

How to upload and save a image into the server without refreshing the entire page

4 Answers4