In this article, I’ll explain how to store and retrieve Image in Database using C# ASP.Net jQuery. There is many other way to do that but here is the easiest way to do it.
Database:
For this tutorial, I am using following database.
CREATE TABLE [dbo].[tblImage](
[ID] [int] IDENTITY(1,1) NOT NULL,
[image] [image] NULL,
CONSTRAINT [PK_tblImage] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
Connection string:
Below is the connection string to connect to the database.
<connectionStrings>
<add name="TempConnectionString" connectionString="Data Source=ASHISH;Initial Catalog=Temp;Persist Security Info=True;User ID=sa;Password=Temp1234567" providerName="System.Data.SqlClient"/>
</connectionStrings>
Page:
In this tutorial, there one aspx page and one handler.
1. UploadImage.aspx – To Store image into database
2. DisplayImage.aspx – To display image from handler
3. DisplayImage.ashx – To read image from database (Handler)
1. UploadImage.aspx
Below HTML Markup of the page, you will notice that I have placed FileUpload to upload image into database.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadImge.aspx.cs" Inherits="UploadImge" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ashish Blog</title>
</head>
<body>
<form id="form1" runat="server">
<strong>Upload Image into database</strong><br />
<br />
Select
Image: <asp:FileUpload ID="FileUpload1" runat="server" /><br />
<br />
<asp:Button ID="butSubmit" runat="server" Text="Submit"
onclick="butSubmit_Click" /><br />
<asp:Label ID="lblStatus" runat="server"></asp:Label>
<br />
<br />
<a href="DisplayImage.aspx">Display Image</a></form>
</body>
</html>
Codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
public partial class UploadImge : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void butSubmit_Click(object sender, EventArgs e)
{
try
{
Byte[] imgByte = null;
if (FileUpload1.HasFile && FileUpload1.PostedFile != null)
{
HttpPostedFile File = FileUpload1.PostedFile;
imgByte = new Byte[File.ContentLength];
File.InputStream.Read(imgByte, 0, File.ContentLength);
}
string cs = ConfigurationManager.ConnectionStrings["TempConnectionString"].ConnectionString;
using( SqlConnection connection = new SqlConnection(cs))
{
connection.Open();
string sql = "INSERT INTO tblImage(image) VALUES(@theImage) SELECT @@IDENTITY";
using (SqlCommand cmd = new SqlCommand(sql, connection))
{
cmd.Parameters.AddWithValue("@theImage", imgByte);
int id = Convert.ToInt32(cmd.ExecuteScalar());
lblStatus.Text = String.Format("Image is Uploaded successfully!! and Image ID is {0}", id);
cmd.Dispose();
}
connection.Close();
connection.Dispose();
}
}
catch(Exception ex)
{
lblStatus.Text = "There was an error" + ex.Message ;
}
}
}
2. DisplayImage.aspx
Below HTML Markup of the page, you will notice that I have placed jQuery function to display Image from database. You may also notice that I created Img variable and call ReadImage.ashx handler by passing Image ID in scr attribute of Img then append this Img to div.display.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplayImage.aspx.cs" Inherits="DisplayImage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function (e) {
$('.display').text(''); //clean div display
var ID = $("#txtID").val();
if (ID.length > 0) {
var newImage = $('<img />');
newImage.attr('src', 'ReadImage.ashx?id=' + ID); // call handler with id
$('.display').append(newImage);
}
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
Display Image<br />
<br />
Id
<asp:TextBox ID="txtID" runat="server"></asp:TextBox>
&amp;nbsp;<asp:Button ID="Button1" runat="server" Text="Display" />
<br />
<br />
<div class="display"></div>
<br />
<br />
</form>
</body>
</html>
3. DisplayImage.ashx (Handler)
<%@ WebHandler Language="C#" Class="ReadImage" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.IO;
using System.Configuration;
public class ReadImage : IHttpHandler
{
public void ProcessRequest (HttpContext context) {
Int32 theID;
if (context.Request.QueryString["id"] != null)
theID = Convert.ToInt32(context.Request.QueryString["id"]);
else
throw new ArgumentException("No parameter specified");
context.Response.ContentType = "image/jpeg";
Stream strm = DisplayImage(theID);
byte[] buffer = new byte[2048];
int byteSeq = strm.Read(buffer, 0, 2048);
while (byteSeq > 0)
{
context.Response.OutputStream.Write(buffer, 0, byteSeq);
byteSeq = strm.Read(buffer, 0, 2048);
}
}
public Stream DisplayImage(int theID)
{
string cs = ConfigurationManager.ConnectionStrings["TempConnectionString"].ConnectionString;
using( SqlConnection connection = new SqlConnection(cs))
{
string sql = "SELECT image FROM tblImage WHERE id = @ID";
using (SqlCommand cmd = new SqlCommand(sql, connection))
{
cmd.CommandType = System.Data.CommandType.Text;
cmd.Parameters.AddWithValue("@ID", theID);
connection.Open();
object theImg = cmd.ExecuteScalar();
try
{
return new MemoryStream((byte[])theImg);
}
catch
{
return null;
}
finally
{
cmd.Dispose();
connection.Close();
connection.Dispose();
}
}
}
}
public bool IsReusable {
get {
return false;
}
}
}
Thanks
Download
[wpdm_file id=5]
