How to generate image preview after uploading the image?

Uploading images is most common task for most of the Application. In this article, I am explaining - How to generate image preview after uploading the image?

Uploading images is most common task for most of the Application. After uploading image we can generate its preview also so that we can verify uploaded image. There is no direct method for this but even then it can be done after uploading the image, means first we will upload the image to the server after that we will generate preview.

In this article, I am going to explain - How to generate preview after uploading the image?

I have designed page like this-

.aspx code-


<table style="border-style: solid; border-width: 2px" align="center">
            <tr>
                 <td>
                    Select Image:
                 </td>
                 <td>
                     <asp:FileUpload ID="fileUpd" runat="server" />
                 </td>
                 <td>
                     <asp:Button ID="btnUploadImage" runat="server" Text="Upload Image" OnClick="btnUploadImage_Click" />
                 </td>
            </tr>
            <tr>
                 <td colspan="3">
                    Image Preview
                 </td>
            </tr>
            <tr>
                 <td colspan="3" align="center">
                     <br />
                     <asp:Image ID="ImgPreview" runat="server" Width="300px" Height="300px" />
                 </td>
            </tr>
  </table>


In above .aspx code, I have taken -

1.  FileUpload Control - This control will be used to upload the image
2.  Image Control- Using this Image Control, preview will be displayed after image uploading.

Now  .cs code-

protected void btnUploadImage_Click(object sender, EventArgs e)
    {
        
//Validating FileUpload control for file
        
if (fileUpd.HasFile)
        {
          
//Getting path
            string path = Server.MapPath(
"images/") + fileUpd.FileName;
          
//Saving image to path
            fileUpd.SaveAs(path);
          
//Generating Image preview by reading image from path
            ImgPreview.ImageUrl =
"images/" + fileUpd.FileName;
        }
        
else
        {
            Response.
Write("<script>alert('No image selected.')</script>");
        }
    }



In above code, first I am validating FileUpload control for selecting image file, If user has selected any image then I have written code to generate preview. To generate image preview first I am saving selected file in images folder of project directory structure, using this line-

    string path = Server.MapPath("images/") + fileUpd.FileName;
    fileUpd.SaveAs(path);


Now I am generating preview using this line-

   ImgPreview.ImageUrl = "images/" + fileUpd.FileName;

After saving image to image folder reading image from that folder and showing in Image Control.

Image preview will be-


                                    

    
In this form, first select image from your local folder. Now click on Upload button, then Image will be displayed in ImageBox. If you don't want to retain previous image in server then while saving image give same image name so that it will replace previous image otherwise it will retain previous image also.

Original Source- MyArticle

By Jitendra Faye   Popularity  (8502 Views)
Biography - Jitendra Faye
Provides Self Implemented Solution.     My Articles