getting a preiew of an image

Question

0.00/5 (No votes)

See more:

Hi all,
I am trying to upload an image.I haev added an upload control to my web page as

CSS

Upload front Image<input id="File1"
        style="Z-INDEX: 100; LEFT: 300px; WIDTH: 288px; POSITION: absolute; TOP: 120px; HEIGHT: 22px"
        type="file" size="28" name="Upload" runat="server" >

XML

<div>
        <asp:Button ID="btnPreview" runat="server" Text="Preview Images"
            onclick="btnPreview_Click" />
    </div>

XML

<asp:Panel id="Panel1" runat="server" Height="1000px" Width="800px" Visible = "true">
    <asp:Image ID="Image6" runat="server" />
    </asp:Panel>

When the user clicks on a preview button i want to display the selected image in an image control.
i am getting teh path of the uploaded file in File1.Value and assigning it as teh ImageUrl but no image is being displayed.
Teh images in have selected are .bmps.
Any help.. please?

C#

protected void btnPreview_Click(object sender, EventArgs e)
      {
          if (File1.PostedFile != null)
          {

C#

Image6.ImageUrl = File1.Value;

}

}

Posted 8-Nov-11 0:05am

AnnSJ

Add a Solution

4 solutions

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)

shashikanth 2011 · Answer 1 · 2011-11-08T00:20:00

As you have to save the uploaded file in your server at one location, and give the url of that location to the HtmlImage object
shown below code may help you to understand

C#

string path = Server.MapPath("") + @"\UserImages\image" + CurrentImage + ".jpg";
            //This will create one path for CurrentImage.jpg
            FileStream fs = File.Create(path);
            fs.Write(ImageUpload.FileBytes, 0, ImageUpload.FileBytes.Length);
            fs.Close();
           //saving the uploaded file in that path
            Image6.ImageUrl=path;// or \UserImages\image" + CurrentImage + ".jpg";

khan mohd faizan · Answer 2 · 2011-11-08T00:22:00

Solution 2

Create folder in ur project and save the images on it and retrivew from it

Posted 8-Nov-11 0:22am

khan mohd faizan

thatraja · Answer 3 · 2011-11-08T00:48:00

Here some ways(Currently my machine(development) is down so I can't check your code)

Show Uploaded Image in Image Control in Asp.net[^]
Display image after upload without page refresh or postback using ASP.Net AsyncFileUpload Control[^]
Upload and Preview Images Using JavaScript and Client Callbacks [^]

hitech_s · Answer 4 · 2011-11-08T00:51:00

this works fine for me

you can do it using javascript am posting my example and will explain you all

//this is the script write in head part of the page

XML

<script type="text/javascript">
   function showimg()
   {
   var path= document.getElementById('<%=txt1.ClientID %>').value;
   document.getElementById('<%=img1.ClientID %>').src=path;
   }
   </script>

//your design should be like this i mean body of the page

XML

<body>
    <form id="form1" runat="server">
    <div>
        <table width="100%">
            <tr>
                <td>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td align="left" width="40%">
                    <asp:FileUpload ID="file1" runat="server" />
                </td>
                <td align="left">
                    <asp:Button ID="btnview" runat="server" Text="Preview" OnClick="btnview_Click"  />
                </td>
            </tr>
            <tr>
                <td align="left">
                    <asp:TextBox ID="txt1" runat="server" />
                </td>
                <td align="left">
                    <asp:Image ID="img1" runat="server" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>

//write this in your code behind

XML

protected void btnview_Click(object sender, EventArgs e)
    {
        HttpPostedFile hp = file1.PostedFile;
        txt1.Text = hp.FileName;
        img1.ImageUrl = hp.FileName.ToString();
        Page.ClientScript.RegisterStartupScript(this.GetType(), "aa", "<script language='javascript'>showimg();</script>");
    }

getting a preiew of an image

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0