Upload and show the images from database

Posted by Venkat | Labels: ,

Hi , Here we are going to see how to upload the image file to database ie : we store the image as a binary format in database.

create the table(name myImages) in sqlserver

with the following columns.

Img_Id --> datatype int (Primary Key with identity)

Image_Content --> datatype image

Image_Type --> datatype varchar(50)

Image_Size --> datatype bigint

Now create a page with name ImageUpload.aspx write the following code....

HtmlCode...


<asp:fileupload id="FileUpload1" runat="server">
<asp:button id="Button1" runat="server" onclick="Button1_Click" text="Button">
</asp:button></asp:fileupload>



CodeBehind..

protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.PostedFile != null && FileUpload1.PostedFile.FileName != "")
{
byte[] myimage = new byte[FileUpload1.PostedFile.ContentLength];
HttpPostedFile Image = FileUpload1.PostedFile;
Image.InputStream.Read(myimage, 0, (int)FileUpload1.PostedFile.ContentLength);

SqlConnection myConnection = new SqlConnection(@"integrated security=yes;data source=.\sqlexpress;database=aaa");
SqlCommand storeimage = new SqlCommand("INSERT INTO myImages(Image_Content, Image_Type, Image_Size) values (@image, @imagetype, @imagesize)", myConnection);
storeimage.Parameters.Add("@image", SqlDbType.Image, myimage.Length).Value = myimage;
storeimage.Parameters.Add("@imagetype", SqlDbType.VarChar, 100).Value = FileUpload1.PostedFile.ContentType;
storeimage.Parameters.Add("@imagesize", SqlDbType.BigInt, 99999).Value = FileUpload1.PostedFile.ContentLength;

myConnection.Open();
storeimage.ExecuteNonQuery();
myConnection.Close();
}
}

To display the image....

Create one HttpHandler class with name Handler.ashx write the following code...


<%@ WebHandler Language="C#" Class="Handler" %> >

using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.IO;

public class Handler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
SqlConnection myConnection = new SqlConnection(@"integrated security=yes;data source=.\sqlexpress;database=aaa");
myConnection.Open();
string sql = "Select * from myImages where Img_Id=@ImageId";
SqlCommand cmd = new SqlCommand(sql, myConnection);
cmd.Parameters.Add("@ImageId", SqlDbType.Int).Value = context.Request.QueryString["id"];
cmd.Prepare();
SqlDataReader dr = cmd.ExecuteReader();
dr.Read();
context.Response.ContentType = dr["Image_Type"].ToString();
context.Response.BinaryWrite((byte[])dr["Image_Content"]);
context.Response.End();
dr.Close();
myConnection.Close();

}

public bool IsReusable
{
get
{
return false;
}
}

}

and create one aspx file with name.... ImageDisplay.aspx

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%#"Handler.ashx?id="+Eval("Img_Id") %>' Height="100" Width="100" />
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Img_Id") %>'></asp:Label>
<asp:Label ID="Label2" runat="server" Text='<%#Eval("Image_Type") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

protected void Page_Load(object sender, EventArgs e)
{
GridView1.DataSource = FetchAllImagesInfo();
GridView1.DataBind();
}
public DataTable FetchAllImagesInfo()
{
string sql = "Select * from myImages";
SqlDataAdapter da = new SqlDataAdapter(sql, @"integrated security=yes;data source=.\sqlexpress;database=aaa");
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}

PayOffers.in