Displaying images from webpage folder

Question

0.00/5 (No votes)

See more:

Hi,

I am currently stuck in a task which deals with displaying image from webpage folder. Code for the upload of the image in database and webpage folder is working good.Now I need to display the uploaded image in a div tag.Can anyone help me figuring this out.

thanks in advance.

My code goes like this
aspx.cs

C#

public partial class Default3 : System.Web.UI.Page
{
    SqlConnection con = new SqlConnection("Data Source=ADMIN-PC;Initial Catalog= Official;Integrated Security=true;");

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        string path = Server.MapPath("Image/");
        if(FileUpload1.HasFile)
        {
            string ext=Path.GetExtension(FileUpload1.FileName);
            if (ext== ".jpg" || ext== ".png")
            {
                FileUpload1.SaveAs(path+FileUpload1.FileName);
                string name="~/Image/"+FileUpload1.FileName;
                string s = "insert into immage values('"+TextBox1.Text.Trim()+"','"+name+"')";

                SqlCommand cmd= new SqlCommand(s,con);
                con.Open();                
                cmd.ExecuteNonQuery();
                con.Close();
                Response.Write("Your file has been uploaded");
            }
            else
            {
                Response.Write("You can upload only jpg and png files");
            }
        }
        else
        {
            Response.Write("Please select a file");

        }
    }
}

aspx

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <title></title>
      
</head>
<body>
    <form id="form1"  runat="server">
    <asp:Panel ID="panel1" runat="server">
    <div>
    
   <br />
                <asp:Label ID="Label1" runat="server" Text="Name" 
            Visible="False">
        
        <asp:TextBox ID="TextBox1" runat="server" Visible="False">
       
        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" 
            style="top: 345px; left: 641px; position: absolute; height: 26px; width: 56px" 
            Text="Submit" />
       
        <div id="Imagediv">
            style="width: 319px; removed 62px; removed 507px; removed: absolute; height: 275px">
            <asp:FileUpload ID="FileUpload1" runat="server" 
                style="width: 217px; top: 239px; left: 60px; position: absolute; height: 22px" />
        </div>
    
    </div>
    
    </form>
</body>
</html>

Posted 17-Sep-12 21:41pm

Raghavanand

Updated 17-Sep-12 21:43pm

Kenneth Haugland

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

andrevdcolff · Accepted Answer · 2012-09-17T23:48:00

Solution 1

I think the easiest way of doing this would be an update panel and an image control.
Here is what I propose:

1- Place an update panel onto the page (with a scriptmanager as well)
2- Place an image control into the update panel's content place holder section
3- In the "Button2_click" event set the image source for the image control after you've done your database query
4- Set the triggers on the update panel to only update when the button click event on "Button2" is fired

Hope this helps and I can probably provide you with sample code if this explanation is clear enough, but this is the simplest way I think of achieving this.

Posted 17-Sep-12 23:48pm

andrevdcolff

Comments

Raghavanand 18-Sep-12 5:55am

Thanks a lot for the reply.I would be extremely happy if you provide me the sample code. Regards

andrevdcolff 18-Sep-12 6:11am

You've accepted the other solution, so do you still need the code to actually display the image?

Raghavanand 18-Sep-12 6:27am

Yes sir I still need the code as it is much easier than the other one.Regards

Raghavanand 18-Sep-12 6:35am

Thank you !! Thanks a lot !! Problem solved

andrevdcolff 18-Sep-12 6:37am

Wonderful! Glad to have been of assistance :)