Show byte[] image using jquery

I have to show the image in its actual size in a div in the same view when clicked on its thumb image. I will explain my scenario. I am using asp.net mvc 2 application. In my view I have thumb images of images which is stored in database as byte[] and also the fileId as hidden field. When clicked on the thumb image I need to show the actual image that is stored in the database.The actual image should be shown in a div in the same view which 开发者_C百科should be shown when click on thumb image. This should happen using jquery. Thanks for looking into this.

You can use a HttpHandler for this. Add a generic handler to your project and do something like the following in the ProcessRequest method

            context.Response.Clear();

            var imageID = context.Request.QueryString["imageID"];   

            MemoryStream stream = new MemoryStream();   

            try
            {
                byte[] buffer = GetYourImageBuffer(imageID);                    

                if(buffer != null)
                {
                    stream = new MemoryStream(buffer);
                    Image image = Image.FromStream(stream);
                    context.Response.ContentType = "image/jpeg"; //Or what ever
                    image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
                }                    
            }
            finally
            {
                context.Response.Flush();
                stream.Close();
            }

Then in your html you will be able to call this by...

<img src="ImageHandler.ashx?imageID=<%: Model.Image.ID %>" />

If you images in byte format in database, then you first need to save the image in a server directory and after saving the image file, display it with the help of jquery. You can also use plugins like lightbox to display the image in a more attractive way.

This way you will be able to show the image on the same view as you are using jquery and making an AJAX request to get the image.