ASP.Net Ajax File upload

Question

Hi, I am trying to upload an image and after uploading i want to show it in the image control. My code is:

<form id="form1" runat="server">
    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:FileUpload ID="FileUploadTest" runat="server" />
                <asp:Button ID="ShowImage" runat="server" Text="Show" 
                    onclick="ShowImage_Click" />
                <asp:Image ID="ImageUploaded" runat="server" Height="150px" Width="150px" 
                    ImageUrl="~/images/blankImage.gif" />
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID="ShowImage" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    </form>

C# code is:

protected void ShowImage_Click(object sender, EventArgs e)
        {
            Label1.Text = "";
            if (FileUploadTest.HasFile)
            {
                try
                {
                    if (FileUploadTest.PostedFile.ContentType == "image/jpeg")
                    {
                        if (FileUploadTest.PostedFile.ContentLength < 102400)
                        {
                            string filename = Path.GetFileName(FileUploadTest.FileName);
                            string imageSavePath = Server.MapPath("~/images/") + filename;
                            FileUploadTest.SaveAs(imageSavePath);
                            ImageUploaded.ImageUrl = imageSavePath;
                            ImageUploaded.Visible = true;
                            Label1.Text = "Upload status: File uploaded!";
                        }
                        else
                            Label1.Text = "Upload status: The file has to be less than 100 kb!";
                    }
                    else
                        Label1.Text = "Upload status: Only JPEG files are accepted!";
                }
                catch (Exception ex)
                {
                    Label1.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
                }
            }
            else
            {
                Label1.Text = "No File !!!";
            }

        }

But After pressing the show button, the image is uploaded successfully. But the image control got vanished. Can any one help me about it?

Answer 1

Your problem is simply that you have the wrong URL for the image after it is uploaded. Change your code to this:

ImageUploaded.ImageUrl = "~/images/" + filename;