ASP.Net Ajax File upload

Question

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?

Ajax file uploads are not possible, but you can fake it with an iframe. If you go directly to the image src in your browser can you see the image? — Jace Rhea
– Jace Rhea, Commented Jan 8, 2010 at 18:55

TheObjectGuy · Accepted Answer · 2010-01-09 13:00:03Z

3

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;

answered Jan 9, 2010 at 13:00

TheObjectGuy

2331 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

ASP.Net Ajax File upload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related