Reader Level:
Articles

How to Save Image Along With Details Into Database in ASP.NET

By Satyapriya Nayak on February 06, 2012
In this article you will see how to save an image along with image details in a database using ASP.NET.
  • 1
  • 0
  • 12963
Download Files:
 

Here we will create three web pages as Default.aspx, employee.aspx and image.aspx. After inserting the records in the Default.aspx page the control moves to employee.aspx where we can see all the records of the employee with images.

Table Creation

table.gif

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="Details_with_photo._Default" %>
 
<!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>Untitled Page</title>
</head>
<
body>
    <form id="form1" runat="server">
    <div>
    <h2>Employee Details </h2>
 
    <table>       
        <tr>
                <td>
                    Name</td>
                <td>
                    <asp:TextBox id="txtname" RunAt="server"></asp:TextBox>
                </td>
            </tr>
 
            <tr>
                <td>
                    Address</td>
                <td>
                    <asp:TextBox id="txtaddress" RunAt="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Image File </td>
                <td>
                    <input id="Upload" type="file" runat="server" /></td>
            </tr>
            </table>
            <asp:Button id="btn_insert" RunAt="server"  Text="Insert" onclick="btn_insert_Click"></asp:Button>           
            <asp:label id="lblMessage" runat="server" />
    </div>
    </form>
</body>
</
html>

Default.aspx.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
namespace Details_with_photo
{
    public partial class _Default : System.Web.UI.Page
    {
        string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        string str;
        SqlCommand com;       
        protected void btn_insert_Click(object sender, EventArgs e)
        {
            insertdata();
        }
        public void insertdata()
        {
            SqlConnection con = new SqlConnection(strConnString);
            con.Open();
            str = "select count(*)from employee where name='" + txtname.Text + "'";

            com = new SqlCommand(str, con);
            int count = Convert.ToInt32(com.ExecuteScalar());
            con.Close();
            if (count > 0)
            {
                lblMessage.Text = "Sorry! you can't take this username";
            }
            else
            {
                lblMessage.Text = "You can take this username";

                con.Open();
                int len = Upload.PostedFile.ContentLength;
                byte[] pic = new byte[len + 1];
                Upload.PostedFile.InputStream.Read(pic, 0, len);
                str = "insert into employee values (@name,@address,@photo)";
                com = new SqlCommand(str, con);
                com.Parameters.AddWithValue("@name", txtname.Text);
                com.Parameters.AddWithValue("@address", txtaddress.Text);
                com.Parameters.AddWithValue("@photo", pic);
                com.ExecuteNonQuery();
                con.Close();
                lblMessage.Text = "Employee Details Inserted Successfully!";

                Response.Redirect("employee.aspx");
                con.Close();
            }
       }
    }
}

employee.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="employee.aspx.cs"
Inherits="Details_with_photo.employee" %>
 
<!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>Untitled Page</title>
</head>
<
body>
    <form id="form1" runat="server">
    <div>
    <asp:repeater runat="server" id="repeater1">
       <headertemplate>
          <h2>Details of Employee </h2>
       </headertemplate>
       <itemtemplate>
         <b>Id :</b> <%# Eval("id") %>
         <br>
         <b>Name   :</b> <%# Eval("name")%>
         <br>
         <b>Address  :</b> <%# Eval("address")%>
         <br>
       <img  alt="image" src='image.aspx?id=<%# Eval("id")%>'/>
         <hr>
       </itemtemplate>
     </asp:repeater>
    </div>
    </form>
</body>
</
html>

employee.aspx.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
namespace Details_with_photo
{
    public partial class employee : System.Web.UI.Page
    {
        string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        string str;
        SqlCommand com;
        protected void Page_Load(object sender, EventArgs e)
        {
         SqlConnection con = new SqlConnection(strConnString);
         con.Open();
         str = "select id,name,address from employee";
         com = new SqlCommand(str, con);
         SqlDataReader reader;
         reader = com.ExecuteReader();
         repeater1.DataSource = reader;
         repeater1.DataBind();
         con.Close();
        }
    }
}


image.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="image.aspx.cs"
Inherits="Details_with_photo.image" %>
 
<!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>Untitled Page</title>
</head>
<
body>
    <form id="form1" runat="server">
    <div>   
    </div>
    </form>
</body>
</
html>

image.aspx.cs

using System;
using System.Collections;
using System.Configuration;
using
System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Data.SqlClient;
namespace Details_with_photo
{
    public partial class image : System.Web.UI.Page
    {
        string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        string str;

        SqlCommand com;
        protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection con = new SqlConnection(strConnString);
            con.Open();
            str = "select photo from employee where id = '" + Request.QueryString["id"] + "'";
            com=new SqlCommand(str, con);
            MemoryStream stream = new MemoryStream();
            byte[] image = (byte[])com.ExecuteScalar();
            stream.Write(image, 0, image.Length);
            Bitmap bitmap = new Bitmap(stream);
            Response.ContentType = "image/Jpeg";
            bitmap.Save(Response.OutputStream, ImageFormat.Jpeg);
            con.Close();
            stream.Close();
        }
    }
}

Output

table1.gif

Thanks for reading.

Satyapriya Nayak

Satyapriya Nayak is a software developer from Bhubaneswar, India. He holds a Bachelor's degree in Electronics and telecommunication and is an active member of C# Corner. 

COMMENT USING

Trending up