Step 1.
First of all create a table named ImagesDisplay to store Image Paths and their names.
Step 2.
Add this HTML code for uploading and displaying images.
<div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClick="btnUpload_Click" />
<asp:GridView ID="gv" runat="server" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" AutoGenerateColumns="false">
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<RowStyle BackColor="White" ForeColor="#330099" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
<SortedAscendingCellStyle BackColor="#FEFCEB" />
<SortedAscendingHeaderStyle BackColor="#AF0101" />
<SortedDescendingCellStyle BackColor="#F6F0C0" />
<SortedDescendingHeaderStyle BackColor="#7E0000" />
<Columns>
<asp:TemplateField HeaderText="Uid">
<ItemTemplate>
<asp:Label ID="lb1" runat="server" Text='<%#Eval("ID")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lb2" runat="server" Text='<%#Eval("FileName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="img" runat="server" ImageUrl='<%#Eval("FilePath")%>' Height="100" Width="100" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
Step 3.
Check for these namespaces in code behind file.
using System;
using System.Data;
using System.Data.SqlClient;
Step 4.
Add a folder to solution named Image.
Step 5.
Write this piece of code in code behind file.Add do not forget to change connection String as your requirement.
protected void Page_Load(object sender, EventArgs e)
{
load();
}
protected void load()
{
DataTable dt = new DataTable();
string strQuery = "select * from ImagesDisplay order by ID";
SqlCommand cmd = new SqlCommand(strQuery);
SqlConnection con = new SqlConnection("Data Source=JITENDRA-PC\\SQLEXPRESS;Initial Catalog=Vaibhav_Task;Integrated Security=True");
SqlDataAdapter sda = new SqlDataAdapter();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
try
{
con.Open();
sda.SelectCommand = cmd;
sda.Fill(dt);
gv.DataSource = dt;
gv.DataBind();
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
finally
{
con.Close();
sda.Dispose();
con.Dispose();
}
}
protected void btnUpload_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string FileName = FileUpload1.FileName;
FileUpload1.SaveAs(Server.MapPath("~//Image//" + FileName));
SqlConnection con = new SqlConnection("Data Source=JITENDRA-PC\\SQLEXPRESS;Initial Catalog=Vaibhav_Task;Integrated Security=True");
string strQuery = "insert into ImagesDisplay (FileName, FilePath)" + " values(@FileName, @FilePath)";
SqlCommand cmd = new SqlCommand(strQuery);
cmd.Parameters.AddWithValue("@FileName", FileName);
cmd.Parameters.AddWithValue("@FilePath", "~//Image//" + FileName);
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
try
{
con.Open();
cmd.ExecuteNonQuery();
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
finally
{
con.Close();
con.Dispose();
}
load();
}
else
{
}
}
Step 6.
Now run the project and select file from file upload and add that to Table.
Click on browse and select any image.
Output-
No comments:
Post a Comment