How To Save And Display Images From Sql Database Using C# Easily

Hi Friends ,Today ,I am going to show you "How to Save and Display images from Sql
database using C# ". This concepts is very useful for all Developers who want to develop an
interactive application in .NET.In this post, first we will upload image and signature files using
File Upload controls after that save the files in sql database. Then after we will display the image
and signature from sql database. This is easy concepts but you have to understand this concepts .
I will show each steps in below section of the page. You can be developed another concepts also
from this concepts .But you will have to some changes in this concepts.
 How to create image Gallery using J Query or Java Script in asp.net application.
 How to develop a Examination forms using asp.net.
 How to save your image in database offline and use it after some time.
etc.

There are some steps to implement this concepts in asp.net application as given below:-

Step 1:- First open your visual studio -->File -->New --> Website -->Select asp.net Empty
website --> OK --> Open your Solution Explorer --> Add a New Web Form (home.aspx)-->
Drag and drop Label ,Button ,Image, File Upload and SqlDataSource controls on the page from
toolbox as shown below:-

Step 2:- Now Add sql database .mdf file in your website folder---> and create 3
columns (serial,image,sign)as shown below:-
Step 3:- Now Write the c# codes behind the Save and Display buttons (home.aspx.cs file) as
given below:-
01 using System;
02 using System.Web;
03 using System.Web.UI;
04 using System.Web.UI.WebControls;
05 using System.Data.SqlClient;
06 using System.Configuration;
07 using System.IO;
08
09 public partial class home : System.Web.UI.Page
10 {
11 protected void Page_Load(object sender, EventArgs e)
12 {
13
14 }
15 protected void Button1_Click(object sender, EventArgs e)
16 {
SqlConnection con
1
= newSqlConnection(ConfigurationManager.ConnectionStrings["regConnectionString"].Conn
7
ectionString);
18 con.Open();
19 byte[] image_Byte = new byte[FileUpload1.PostedFile.InputStream.Length + 1];
20 FileUpload1.PostedFile.InputStream.Read(image_Byte, 0, image_Byte.Length);
21 byte[] sign_Byte = new byte[FileUpload2.PostedFile.InputStream.Length + 1];
22 FileUpload2.PostedFile.InputStream.Read(sign_Byte, 0, sign_Byte.Length);
23 //Check whether image size 25 kb and signature size 12 kb or not
24 long size_img = FileUpload1.PostedFile.InputStream.Length;
25 long size_sign = FileUpload2.PostedFile.InputStream.Length;
26 SqlCommand cmd = new SqlCommand("insert into image_files values(@i,@s)", con);
27 cmd.Parameters.AddWithValue("i",image_Byte);
28 cmd.Parameters.AddWithValue("s", sign_Byte);
29 cmd.ExecuteNonQuery();
30 Label1.Text = "Data inserted in database successfully ";
31 con.Close();
32
33 //different c# coding for same functionality given below.Use any one above or below.
34
//FileStream fs1 = new FileStream(FileUpload1.PostedFile.FileName, FileMode.Open,
35
FileAccess.Read);
//FileStream fs2 = new FileStream(FileUpload1.PostedFile.FileName, FileMode.Open,
36
FileAccess.Read);
37 ////BinaryReader br1 = new BinaryReader(fs1);
38 ////BinaryReader br2 = new BinaryReader(fs2);
39 //byte[] file_data1 = new byte[fs1.Length];
40 //byte[] file_data2 = new byte[fs2.Length];
41 //fs1.Read(file_data1,0,file_data1.Length);
42 //fs2.Read(file_data1, 0, file_data1.Length);
43 //SqlCommand cmd = new SqlCommand("insert into image_file values(@i,@s)", con);
44 //cmd.Parameters.AddWithValue("i",file_data1);
45 //cmd.Parameters.AddWithValue("s", file_data2);
46 //cmd.ExecuteNonQuery();
47 }
48 protected void Button2_Click(object sender, EventArgs e)
49 {
50 Retrieve_Image_signFromDB();
51 }
52 private void Retrieve_Image_signFromDB()
53 {
54 Image1.ImageUrl = "image.aspx";
55 Image2.ImageUrl = "sign.aspx";
56 }
57 }

Step 4:- Now add a New web form (image.aspx) --> press F7 and write the c# codes on page
load as given below:-
01 using System;
02 using System.Web;
03 using System.Web.UI;
04 using System.Web.UI.WebControls;
05 using System.Data.SqlClient;
06 using System.Configuration;
07 using System.IO;
08
09 public partial class image : System.Web.UI.Page
10 {
11 protected void Page_Load(object sender, EventArgs e)
12 {
SqlConnection con
1
= newSqlConnection(ConfigurationManager.ConnectionStrings["regConnectionString"].Conn
3
ectionString);
14 con.Open();
SqlCommand cmd = new SqlCommand("select image from image_files where [serial] =
15
1", con);
16 SqlDataReader dr = cmd.ExecuteReader();
17 //we have to typecast to byte[] before feeding it to BinaryWrite method.
18 if (dr.Read())
19 {
20 Response.BinaryWrite((byte[])dr["image"]);
21 }
22 con.Close();
23 }
24 }

Step 5:- Now add a New web form (sign.aspx) --> Press F7 and write the c# codes on page load
as given below:-
01 using System;
02 using System.Web;
03 using System.Web.UI;
04 using System.Web.UI.WebControls;
05 using System.Data.SqlClient;
06 using System.Configuration;
07 using System.IO;
08
09 public partial class sign : System.Web.UI.Page
10 {
11 protected void Page_Load(object sender, EventArgs e)
12 {
13
SqlConnection con
1
= newSqlConnection(ConfigurationManager.ConnectionStrings["regConnectionString"].Conn
4
ectionString);
15 con.Open();
SqlCommand cmd = new SqlCommand("select sign from image_files where [serial] =1",
16
con);
17 SqlDataReader dr = cmd.ExecuteReader();
18 //we have to typecast to byte[] before feeding it to BinaryWrite method.
19 if (dr.Read())
20 {
21 Response.BinaryWrite((byte[])dr["sign"]);
22 }
23 con.Close();
24 }
25 }
Step 6:- Now Run the Application (press F5) --> Upload image and signature from your system
(computer) --> press Save Button--> You will see following output as shown below:-
Step 7:- Now Press the Display Button -->You will see following output as shown below:-

Step 7:-Now open your Database.mdf file --> You will see , files is inserted in table as shown
below: