Click here to Skip to main content
Click here to Skip to main content

Previewing Image in ASP.NET Image Control using C#

, 7 Aug 2012
Rate this:
Please Sign up or sign in to vote.
Previewing Image in ASP.NET Image Control using C#

Introduction

Recently there are so many people asking in forums how to preview an uploaded image before saving it to the database. In this article, let us see how to preview an uploaded image in ASP.NET before saving it to database. Also this we will see how to feed a byte array into an image control. We are going to achieve this using an IhttpHandler.

Using the code

  1. Create a new website. Add a FileUpload control, a button, and an image control.
  2. ASPX code:

    <table>
        <tr>
            <td class="style3">
                <asp:Label ID="Label1" runat="server" Text="Photo upload" />
            </td>
            <td class="style4">
                <asp:FileUpload runat="server" ID="PhotoUpload" />
            </td>
            <td class="style4">
                <asp:Button runat="server" ID="btnPhotoPreview" Text="Preview" />
            </td>
            <td class="style1">
                <asp:Image runat="server" ID="ImagePreview" Height="164px" Width="125px" />
            </td>
        </tr>
    </table>
  3. Now add a button click event for “btnPhotopreview”.
  4. <asp:Button runat="server" OnClick="btnPreview_Click" ID="btnPhotoPreview" Text="Preview" />
  5. We have to add a handler class in order to show the image. We are going to pass the session variable for FileBytes for the upload control. In the new handler class, get the session variable and generate the image.
  6. When we add the .ashx file, it will have some code inside it.

    <%@ WebHandler Language="C#" Class="ImageHandler" %>
    
    using System;
    using System.Web;
    
    public class ImageHandler : IHttpHandler {
        
        public void ProcessRequest (HttpContext context) {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Hello World");
        }
     
        public bool IsReusable {
            get {
                return false;
            }
        }
    }

    Just rewrite the code inside processrequest to get the session variable and generate the image.

    In order to use the session variable in the HTTPHandler class we also implement our class from IRequiresSessionState.

    <%@ WebHandler Language="C#" Class="ImageHandler" %>
    
    using System;
    using System.Web;
    
    public class ImageHandler : IHttpHandler, System.Web.SessionState.IRequiresSessionState
    {
        
        public void ProcessRequest (HttpContext context) {
           //Checking whether the imagebytes session variable have anything else not doing anything
    
            if ((context.Session["ImageBytes"]) != null)
            {
                byte[] image = (byte[])(context.Session["ImageBytes"]);
                context.Response.ContentType = "image/JPEG";
                context.Response.BinaryWrite(image);
            }
        }
     
        public bool IsReusable {
            get {
                return false;
            }
        }
    }
  7. Now inside the button click in our page, get the file bytes from the FileUpload control and save it in the session variable.
  8. protected void btnPreview_Click(object sender, EventArgs e)
    {
        Session["ImageBytes"] = PhotoUpload.FileBytes;
        ImagePreview.ImageUrl = "~/ImageHandler.ashx";
    }

Now run the application and browse the image and preview it.

I have attached the complete source code also.

License

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

Share

About the Author

Santhosh Kumar Jayaraman
Software Developer Education First
India India
Started my career with Infosys in 2009 and currently working with Education First. I have great passion towards Microsoft technologies. I have experience in Microsoft technologies like WPF, WCF, ASPNET, WinForms,Silverlight, VB.NET, C-Sharp, Entity framework,SSRS, LINQ, Extension methods and SQL server.

Comments and Discussions

 
QuestionMultiple images in the same page PinmemberMember 21609874-Apr-13 0:09 
Hi,
thanks for sample, is very good.
I've implemented it and works very well.
 
But now I have another issue, in the same page I have 9 image controls and I'm trying to load them as described, but... all controls show the same image even if I've saved in different session variables:
Session("Image1"), Session("Image2")....
and I've modified the ProcessRequest:
 
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
 
Try
 
For i As Integer = 1 To 9
If (context.Session("Image" & i)) IsNot Nothing Then
Dim image As Byte() = DirectCast(context.Session("Image" & i), Byte())
context.Response.ContentType = "image/JPEG"
context.Response.BinaryWrite(image)
End If
 
Next
 
Catch ex As Exception
 
End Try
 

End Sub
 
What do I have to do to load more Imgage controls with different images?
GeneralMy vote of 5 Pinmemberabhi99314-Mar-13 8:41 
GeneralMy vote of 4 PinmemberZan Zan Koe23-Dec-12 6:00 
GeneralThanks PinmemberMember 954329825-Oct-12 9:59 
Questionif Session["ImageBytes"] returns null PinmemberPritesh Aryan12-Oct-12 5:08 
AnswerRe: if Session["ImageBytes"] returns null PinmemberSanthosh Kumar J12-Oct-12 6:13 
QuestionThank! Pinmembergoomingi11-Oct-12 18:58 
AnswerRe: Thank! PinmemberSanthosh Kumar J11-Oct-12 18:59 
GeneralMy vote of 4 Pinmembergoomingi11-Oct-12 18:56 
Questionpreview after choosing file PinmemberMember 944104918-Sep-12 23:50 
AnswerRe: preview after choosing file PinmemberSanthosh Kumar J19-Sep-12 2:05 
GeneralRe: preview after choosing file PinmemberMember 445948429-Oct-12 8:43 
AnswerRe: preview after choosing file PinmemberSridhar Ch31-Oct-12 23:32 
GeneralRe: preview after choosing file Pinmemberyugandhar1126-Feb-13 23:13 
GeneralMy vote of 4 PinmemberTathagat Verma7-Aug-12 19:00 
GeneralImage upload Pinmembershanid3602-Aug-12 20:37 
GeneralMy vote of 5 PinmemberCarsten V2.029-Jul-12 5:02 
GeneralRe: My vote of 5 PinmemberSanthosh Kumar J6-Aug-12 2:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140821.2 | Last Updated 7 Aug 2012
Article Copyright 2012 by Santhosh Kumar Jayaraman
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid