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


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.

Up Next
    Ebook Download
    View all
    Learn
    View all