Change Image Url at button click

Question

In my asp.net page I have Image control , in which myimage.png will display at page load. Requirement as below, Browse image using File upload control and on click of Upload button , immediate preview need to be displayed in Image control. When upload button is pressed after browsing image, the existing "myimage.png" will be deleted and new image will be saved into sever path with same name and preview need to be displayed in image control.

Issue is After saving image , image control is not displaying the new image immediately. To view the image page need to be re-loaded. Code as below, In aspx page,

<asp:Image ID="imgLogo"  style="margin-left: -299px;" ImageUrl="~/images/myimage.png" runat="server" />

Code behind as below,

protected void btnUpload_Click(object sender, EventArgs e)
{
    string filePath = FileUpload1.PostedFile.FileName;
    File.Delete(Server.MapPath(@"~\images\myimage.png"));
    FileUpload1.SaveAs(Server.MapPath(@"~\images\myimage.png"));
    imgLogo.ImageUrl = Server.MapPath(@"~\images\myimage.png");
 }

Regards

Steve Padmore · Accepted Answer · 2015-03-07 16:36:41Z

1

This looks like a browser caching issue.

The url is exactly the same as it was prior to changing the image file, so the cache will use the originally named file (in its cache) to display.

You can get over this hurdle by adding something extra (but not used) to the url:

protected void btnUpload_Click(object sender, EventArgs e)
{
    // Do your upload stuff here...
    imgLogo.ImageUrl = "~/images/myimage.png?" + DateTime.Now;
 }

answered Mar 7, 2015 at 16:36

Steve Padmore

1,7401 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Szab · Accepted Answer · 2015-03-07 13:50:34Z

The reason your page must be reloaded is because ASP.NET code is executed on a server. So every time you, for example, click the button with a server-side code inside, the request is sent to the server, server executes your code and returns a proper response. Basically: something MUST be reloaded. It doesn't have to be the entire page, though. You can force the browser to reload only a certain piece of page using AJAX extensions such as Script Manager and Update Panel.

Example (aspx page):

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Click the button."></asp:Label>
                <br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Hello World" />     
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

OnClick event:

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Hello world!";
}

Also, you can force the panel to update it's content using the Update() method of the UpdatePanel.

Collectives™ on Stack Overflow

Change Image Url at button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related