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:-

Note :- If any one facing problem to add .mdf or .sdf file in asp.net website, follow below links:-

1. How to Add .mdf or .sdf  file in asp.net website easily
2. How to solve problem to add .mdf or .sdf file in asp.net website

Step 3:- Now Write the c# codes behind the Save and Display buttons (home.aspx.cs file) as given below:-

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;

public partial class home : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["regConnectionString"].ConnectionString);
    con.Open();
   byte[] image_Byte = new byte[FileUpload1.PostedFile.InputStream.Length + 1];
  FileUpload1.PostedFile.InputStream.Read(image_Byte, 0, image_Byte.Length);
  byte[] sign_Byte = new byte[FileUpload2.PostedFile.InputStream.Length + 1];
  FileUpload2.PostedFile.InputStream.Read(sign_Byte, 0, sign_Byte.Length);
 //Check whether image size 25 kb and signature size 12 kb or not
 long size_img = FileUpload1.PostedFile.InputStream.Length;
 long size_sign = FileUpload2.PostedFile.InputStream.Length;
 SqlCommand cmd = new SqlCommand("insert into image_files values(@i,@s)", con);
 cmd.Parameters.AddWithValue("i",image_Byte);
 cmd.Parameters.AddWithValue("s", sign_Byte);
 cmd.ExecuteNonQuery();
 Label1.Text = "Data inserted in database successfully ";
 con.Close();

      //different c# coding for same functionality given below.Use any one above or below.
 
    //FileStream fs1 = new FileStream(FileUpload1.PostedFile.FileName, FileMode.Open, FileAccess.Read);
    //FileStream fs2 = new FileStream(FileUpload1.PostedFile.FileName, FileMode.Open, FileAccess.Read);
    ////BinaryReader br1 = new BinaryReader(fs1);
    ////BinaryReader br2 = new BinaryReader(fs2);
    //byte[] file_data1 = new byte[fs1.Length];
    //byte[] file_data2 = new byte[fs2.Length];
    //fs1.Read(file_data1,0,file_data1.Length);
    //fs2.Read(file_data1, 0, file_data1.Length);
    //SqlCommand cmd = new SqlCommand("insert into image_file values(@i,@s)", con);
    //cmd.Parameters.AddWithValue("i",file_data1);
    //cmd.Parameters.AddWithValue("s", file_data2);
    //cmd.ExecuteNonQuery();
    } 
    protected void Button2_Click(object sender, EventArgs e)
    {
        Retrieve_Image_signFromDB();
    }
    private void Retrieve_Image_signFromDB()
    {
        Image1.ImageUrl = "image.aspx";
        Image2.ImageUrl = "sign.aspx";
    }
}

Step 4:- Now add a New web form (image.aspx) --> press F7 and write the c# codes on page load as given below:-

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;

public partial class image : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["regConnectionString"].ConnectionString);
        con.Open();
        SqlCommand cmd = new SqlCommand("select image from image_files where [serial] = 1", con);
        SqlDataReader dr = cmd.ExecuteReader();
        //we have to typecast to byte[] before feeding it to BinaryWrite method.
        if (dr.Read())
        {
            Response.BinaryWrite((byte[])dr["image"]);
        }
        con.Close();
    }
}

Step 5:- Now add a New web form (sign.aspx) --> Press F7 and write the c# codes on page load as given below:-

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;

public partial class sign : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["regConnectionString"].ConnectionString);
        con.Open();
        SqlCommand cmd = new SqlCommand("select sign from image_files where [serial] =1", con);
        SqlDataReader dr = cmd.ExecuteReader();
        //we have to typecast to byte[] before feeding it to BinaryWrite method.
        if (dr.Read())
        {
            Response.BinaryWrite((byte[])dr["sign"]);
        }
        con.Close();
    }
    }

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:

Note :- This application is more important for all asp.net web developers, Therefore ,they can download whole application from below and Run it on your visual studio without any problem. 
If you are facing any problem in this application or other applications ,you can inform me by comments or  through Contact me form.
For More...

1. How to build Form filling application like ibps
2. How to use existing login controls in asp.net
3. How to implement tree concepts in wpf application
4. How to use projection operators with LINQ
5. How to implement XAML concepts in WPF application
6. How to implement PLINQ Concepts in asp.net

I hope this is helpful to you.
Please share this post with your friends...

Download Whole Attached file

      Download