Hi JOYSON,
I have created sample that full-fill your requirement by refering the below articles.
SQL
CREATE TABLE [dbo].[tblFiles](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[ContentType] [varchar](50) NULL,
[Data] [varbinary](max) NULL
)
CS.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var reader = new FileReader();
var fileName;
var contentType;
$('input[type=file]').change(function () {
if (typeof (FileReader) != "undefined") {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
$($(this)[0].files).each(function () {
var file = $(this);
if (regex.test(file[0].name.toLowerCase())) {
fileName = file[0].name;
contentType = file[0].type;
reader.readAsDataURL(file[0]);
} else {
alert(file[0].name + " is not a valid image file.");
return false;
}
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
$('#btnUpload').on("click", function () {
var byteData = reader.result;
byteData = byteData.split(';')[1].replace("base64,", "");
$.ajax({
type: "POST",
url: "CS.aspx/InsertImage",
data: '{byteData: "' + byteData + '", imageName: "' + fileName + '", contentType: "' + contentType + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) { alert(response.d); },
error: function (response) { alert(response.responseText); }
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fuUpload" runat="server" />
<asp:Button ID="btnUpload" Text="Upload" runat="server" />
</div>
<div>
<asp:DropDownList ID="ddlImages" runat="server" AppendDataBoundItems="true" AutoPostBack="true"
OnSelectedIndexChanged="FetchImage">
<asp:ListItem Text="Select Image" Value="0" />
</asp:DropDownList>
<hr />
<asp:Image ID="Image1" runat="server" Visible="false" />
</div>
</form>
</body>
</html>
CS.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
ddlImages.DataSource = GetData("SELECT Id, Name FROM tblFiles");
ddlImages.DataTextField = "Name";
ddlImages.DataValueField = "Id";
ddlImages.DataBind();
}
}
private DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}
protected void FetchImage(object sender, EventArgs e)
{
string id = ddlImages.SelectedItem.Value;
Image1.Visible = id != "0";
if (id != "0")
{
byte[] bytes = (byte[])GetData("SELECT Data FROM tblFiles WHERE Id =" + id).Rows[0]["Data"];
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
Image1.ImageUrl = "data:image/png;base64," + base64String;
}
}
[System.Web.Services.WebMethod]
public static string InsertImage(string byteData, string imageName, string contentType)
{
byte[] bytes = Convert.FromBase64String(byteData);
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO tblFiles VALUES(@Name,@ContentType,@Data)"))
{
cmd.Parameters.AddWithValue("@Name", imageName);
cmd.Parameters.AddWithValue("@ContentType", contentType);
cmd.Parameters.AddWithValue("@Data", bytes);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
return "Uploaded Successfully!";
}
VB.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var reader = new FileReader();
var fileName;
var contentType;
$('input[type=file]').change(function () {
if (typeof (FileReader) != "undefined") {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
$($(this)[0].files).each(function () {
var file = $(this);
if (regex.test(file[0].name.toLowerCase())) {
fileName = file[0].name;
contentType = file[0].type;
reader.readAsDataURL(file[0]);
} else {
alert(file[0].name + " is not a valid image file.");
return false;
}
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
$('#btnUpload').on("click", function () {
var byteData = reader.result;
byteData = byteData.split(';')[1].replace("base64,", "");
$.ajax({
type: "POST",
url: "VB.aspx/InsertImage",
data: '{byteData: "' + byteData + '", imageName: "' + fileName + '", contentType: "' + contentType + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) { alert(response.d); },
error: function (response) { alert(response.responseText); }
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fuUpload" runat="server" />
<asp:Button ID="btnUpload" Text="Upload" runat="server" />
</div>
<div>
<asp:DropDownList ID="ddlImages" runat="server" AppendDataBoundItems="true" AutoPostBack="true"
OnSelectedIndexChanged="FetchImage">
<asp:ListItem Text="Select Image" Value="0" />
</asp:DropDownList>
<hr />
<asp:Image ID="Image1" runat="server" Visible="false" />
</div>
</form>
</body>
</html>
VB.aspx.vb
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
ddlImages.DataSource = GetData("SELECT Id, Name FROM tblFiles")
ddlImages.DataTextField = "Name"
ddlImages.DataValueField = "Id"
ddlImages.DataBind()
End If
End Sub
Private Function GetData(query As String) As DataTable
Dim dt As New DataTable()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand(query)
Using sda As New SqlDataAdapter()
cmd.CommandType = CommandType.Text
cmd.Connection = con
sda.SelectCommand = cmd
sda.Fill(dt)
End Using
End Using
Return dt
End Using
End Function
Protected Sub FetchImage(sender As Object, e As EventArgs)
Dim id As String = ddlImages.SelectedItem.Value
Image1.Visible = id <> "0"
If id <> "0" Then
Dim bytes As Byte() = DirectCast(GetData(Convert.ToString("SELECT Data FROM tblFiles WHERE Id =") & id).Rows(0)("Data"), Byte())
Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
Image1.ImageUrl = Convert.ToString("data:image/png;base64,") & base64String
End If
End Sub
<System.Web.Services.WebMethod()> _
Public Shared Function InsertImage(byteData As String, imageName As String, contentType As String) As String
Dim bytes As Byte() = Convert.FromBase64String(byteData)
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("INSERT INTO tblFiles VALUES(@Name,@ContentType,@Data)")
cmd.Parameters.AddWithValue("@Name", imageName)
cmd.Parameters.AddWithValue("@ContentType", contentType)
cmd.Parameters.AddWithValue("@Data", bytes)
cmd.Connection = con
con.Open()
cmd.ExecuteNonQuery()
con.Close()
End Using
End Using
Return "Uploaded Successfully!"
End Function
Screenshot
