In this article i'm going to explain how to store image into database and retrieve image and display in asp.net image control by using generic handler file. Before we start first we need to create database and storedprocedure which i used in this project.
Creating Database
create table Image( imgid int identity, imgtitle varchar(30), img varbinary(max))
Stored Procedure
Stored Procedure for Inserting Image Data
Create procedure [dbo].[spInsertImage]( @imgTitle varchar(50), @image varbinary(MAX)) as begin insert into Image(imgtitle,img) values (@imgTitle,@image) end
Stored Procedure for Get Image by ImageTitle
This storedprocedure is used to retrieve image from database by passing image title as value, if you want you can change as per your requirement.
Create procedure [dbo].[spGetImage]( @imgTitle varchar(50)) as begin select * from Image where imgtitle=@imgTitle end
HTML Markup : Design Page
Design WebForm1.aspx
page as i shown in above image or you can design as per your requirement.
<div> <table> <tr> <th colspan="2">Upload Image</th> </tr> <tr> <td>Title : </td> <td> <asp:TextBox ID="txttitle" runat="server"></asp:TextBox> </td> </tr> <tr> <td>Upload Image :</td> <td> <asp:FileUpload ID="FileUploader1" runat="server" /> </td> </tr> <tr> <td colspan="2"> <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /> </td> </tr> </table> </div> <br /> <asp:Image ID="Image1" runat="server" Width="300px" Height="300px" />
C# Coding
C# Coding : Upload Button Click
protected void btnUpload_Click(object sender, EventArgs e) { byte[] img = null; if (FileUploader1.HasFile) { img = Image.ConvertImagetoByte(FileUploader1.PostedFile); SqlCommand cmd = new SqlCommand("spInsertImage", con); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@imgTitle", txttitle.Text); cmd.Parameters.AddWithValue("@image", img); con.Open(); cmd.ExecuteNonQuery(); con.Close(); Image1.ImageUrl = "~/ImageHandler.ashx?ImageID="+txtTitle.Text.Trim(); } }
C# Coding : Generic Handler Code
In ImageHandler.ashx
is retrieve Title
value from context.Request.Querystring["title"];
and display in asp.net Image control.
public void ProcessRequest(HttpContext context) { string title = context.Request.QueryString["title"]; if (title != "") { SqlConnection connection = new SqlConnection("Server=.; Database=master; User Id=sa; Password=tiger;"); SqlCommand cmd = new SqlCommand("[spGetImage]", connection); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@imgTitle", title); connection.Open(); SqlDataAdapter da = new SqlDataAdapter(cmd); DataSet ds = new DataSet(); da.Fill(ds); //Get Image Data byte[] file = null; if (ds.Tables[0].Rows.Count > 0) { file = (byte[])ds.Tables[0].Rows[0]["img"]; } MemoryStream memoryStream = new MemoryStream(); memoryStream.Write(file, 0, file.Length); context.Response.ContentType = "image/png"; context.Response.Buffer = true; context.Response.BinaryWrite(file); memoryStream.Dispose(); } }
0 Comments