How to Store and Retrieve Images from SQL Server Database using Asp.Net
In this tutorial we will discuss How to Store and Retrieve Images from SQL Server Database using Asp.Net. In this approach first of all we will upload file through FileUpload Control and save the image name in SQL Server Database. Then we will display images on Gridview control.
In previous post we have discussed about How to Create a directory using ASP.NET and C#.
How to Store and Retrieve Images from SQL Server Database using Asp.Net Steps:
1. Create a table with name: Gridviewimage.
create table Gridviewimage( Fileid int identity(1,1), imagename varchar(50), ) go
2. Design your page as following:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>How to Store and Retrieve Images from SQL Server Database using Asp.Net</title>
<style type="text/css">
body {
width: 980px;
margin: 0px auto;
text-align: center;
padding-top: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<h1>How to Store and Retrieve Images from SQL Server Database using Asp.Net</h1>
</td>
</tr>
<tr>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Upload File" OnClick="Button1_Click" />
</td>
</tr>
<tr>
<td>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="id" runat="server" Text='<%#Eval("Fileid") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%#"~/Image_upload/"+Eval("imagename") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
3. Copy paste following code on code page.
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string connn = ConfigurationManager.ConnectionStrings["con"].ConnectionString;
SqlConnection conn = new SqlConnection(connn);
if(FileUpload1.PostedFile!=null)
{
string imagename=Path.GetFileName(FileUpload1.PostedFile.FileName);
string pathname;
pathname = Server.MapPath("~\\Image_upload\\") + FileUpload1.FileName;
FileUpload1.PostedFile.SaveAs(pathname);
try
{
conn.Open();
string insquery = "Insert into Gridviewimage(imagename) values('" + FileUpload1.FileName.ToString() + "')";
SqlCommand cmd = new SqlCommand(insquery, conn);
cmd.ExecuteNonQuery();
conn.Close();
binddata();
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
}
}
public void binddata()
{
string connn = ConfigurationManager.ConnectionStrings["con"].ConnectionString;
SqlConnection conn = new SqlConnection(connn);
try
{
conn.Open();
string query = "select fileid,imagename from Gridviewimage";
SqlCommand cmd = new SqlCommand(query, conn);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
finally
{
conn.Close();
conn.Dispose();
}
}
}
Download Code:
