How to display binary format Image in GridView Control in Asp.net
Note : Here we will discuss how to save image
in Sql Server Database with Image and varbinary(max) and after saved image how to display in GridView
Control
-- Sql Server Query ...
create database test
use test
create table Employee
(
SrNo int primary key,
Name varchar(50),
UserImage varbinary(max),
PanCard image
)
Source Code for Default.aspx……………………….
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
<tr>
<td>
SrNo</td>
<td>
<asp:TextBox ID="txtSrNo" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Name</td>
<td>
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
UserImage</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
</tr>
<tr>
<td>
PanCard Image</td>
<td>
<asp:FileUpload ID="FileUpload2" runat="server" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSave" runat="server" onclick="btnSave_Click" Text="Save" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Label ID="lblmessage" runat="server" Text="Label" Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<center>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="SrNo">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("SrNo") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="User
Image">
<ItemTemplate>
<img src='Data:abc;base64, <%#Eval("UserImage") != System.DBNull.Value ? Convert.ToBase64String((byte[])Eval("UserImage")):string.Empty %>' alt="abc" height="75px" width="75px" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="PanCard">
<ItemTemplate>
<img src='Data:abc;base64, <%#Eval("PanCard") != System.DBNull.Value ? Convert.ToBase64String((byte[])Eval("PanCard")):string.Empty %>' alt="abc" height="75px" width="75px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</center>
</td>
</tr>
</table>
<div>
</div>
</form>
</body>
</html>
Source Code for Default.aspx.cs……………………….
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data.SqlClient;
using System.IO;
using System.Drawing;
using
System.Configuration;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ShowAllData();
}
}
//code for how to bind data
in GridView
private void ShowAllData()
{
SqlCommand cmd = new SqlCommand("Select *
from Employee",
con);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
GridView1.DataSource =
ds.Tables[0];
GridView1.DataBind();
}
string exe;
byte[] imgbyte = null;
//connection string with
Web.Confi file
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["kush"].ConnectionString);
protected void btnSave_Click(object sender, EventArgs e)
{
// code
for only upload png,jpg,jpeg format for
image………………
exe = Path.GetExtension(FileUpload1.FileName).ToLower();
if
(FileUpload1.HasFile & FileUpload1.PostedFile != null)
{
if (exe == ".png" || exe == ".jpg" || exe == ".jpeg")
{
// code
for upload image less than 10 K B only……………… 1 kb=1024
bytes -> 10kb= 10240 bytes
if
(FileUpload1.FileBytes.Length <= 10240)
{
HttpPostedFile file =
FileUpload1.PostedFile;
imgbyte = new byte[file.ContentLength];
file.InputStream.Read(imgbyte,
0, file.ContentLength);
SqlCommand cmd = new SqlCommand("insert into
Employee ([SrNo],Name,[UserImage],[PanCard]) values
(@SrNo,@Name,@UserImage,@PanCard)", con) ;
con.Open();
cmd.Parameters.AddWithValue("@SrNo", Convert.ToInt32(txtSrNo.Text));
cmd.Parameters.AddWithValue("@Name", txtname.Text);
cmd.Parameters.AddWithValue("@UserImage", imgbyte);
cmd.Parameters.AddWithValue("@PanCard",
FileUpload2.FileBytes);
cmd.ExecuteNonQuery();
con.Close();
ShowAllData();
lblmessage.Visible = true;
lblmessage.ForeColor = Color.Green;
lblmessage.Text = "Save
Successfully";
}
else
{
lblmessage.Visible = true;
lblmessage.ForeColor
= Color.Red;
lblmessage.Text
= "Please upload image less than 10 kb ";
}
else
{
lblmessage.Visible = true;
lblmessage.ForeColor = Color.Red;
lblmessage.Text = "Please
select png,jpg,jpeg file for image upload";
}
}
else
{
lblmessage.Visible = true;
lblmessage.ForeColor = Color.Red;
lblmessage.Text = "Please
upload image for User Image";
}
}
}
Result
sir ji kuch bata diya karu hum ku bhi...................?
ReplyDelete