Previewing image in ASP.NET image control

San.Pblr.Gct
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 13841 red flag

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


 Download source code for Previewing image in ASP.NET image control

Introduction

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

Using the code

1.      Create a new website. Add a File Upload control , a button and an image control.

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>

2.      Now add a button click event for the “btnPhotopreview”.


<asp:Button runat="server" OnClick="btnPreview_Click" ID="btnPhotoPreview" Text="Preview" />

3.      We have to add a handler class in order to show the image. We are going to pass session variable for FileBytes for upload control. In the new  handler class, get the session variable and generate the image.

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 session variable and generate image.

Inorder to use session variable in 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;

        }

    }

 

}

4.      Now inside button click in our page, get the filebytes from FileUpload control and save it in session variable.

protected void btnPreview_Click(object sender, EventArgs e)

    {

        Session["ImageBytes"] = PhotoUpload.FileBytes;

        ImagePreview.ImageUrl = "~/ImageHandler.ashx";

    } 

Now run the  application and browse image and preview it.

I have attached complete source code also.

Page copy protected against web site content infringement by Copyscape

About the Author

San.Pblr.Gct
Full Name: santhosh kumar
Member Level: Starter
Member Status: Member
Member Since: 4/6/2012 12:13:36 AM
Country: India

http://www.dotnetfunda.com
I am working as a developer in EF. I have been working in c#, sql, Silverlight,WPF and ASP.NET for last 3 years

Login to vote for this post.

Comments or Responses

Posted by: Hareesh on: 8/2/2012 | Points: 25
hi santhosh iam trying these, but iam not getting output

Thanks
Hareesh.A
Posted by: San.Pblr.Gct on: 8/2/2012 | Points: 25
Have you used the source code? Which version of dotnet framework you are using?

Login to post response

Comment using Facebook(Author doesn't get notification)