We will save the name and path of the image to the database.

Initial chamber

Step 1: Open Visual Studio 2010 and create an empty website. Give it a suitable name: FileUpload_demo.

Step 2: In Solution Explorer you will get your empty website. Add a web form and SQL Database like the following:

For Web Form:

FileUpload_demo (Your Empty Website) - Right Click, Add New Item, then click Web Form. Name it Fileupload_demo.aspx.

Go back to your website in Solution Explorer and Add New Folder and Give name as - New Folder, then Upload.

folder

For SQL Server Database:

FileUpload_demo (Your Empty Website) - Right Click and Add New Item, then click SQL Server Database. Add Database inside the App_Data_folder.

Database chamber

Step 3: Go to your Database [Database.mdf], we will create a table - tbl_Data. Also, go to the database.mdf - Table and add new table, design your table like this:

Table - tbl_data ([Don’t forget to make ID, then Identity Specification as Yes).

table

Design chamber

Step 4: Open Fileupload_demo.aspx file to create our design, we will drag an HTML table, a FileUpload control, button, label and a textbox.

Fileupload_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  8. <style type="text/css">
  9. .style1
  10. {
  11. width: 283px;
  12. }
  13. .style2
  14. {
  15. width: 247px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <form id="form1" runat="server">
  21. <div>
  23. <table style="width:100%;">
  24. <tr>
  25. <td class="style1">
  26. Image Name:</td>
  27. <td class="style2">
  28. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  29. </td>
  30. <td>
  31. </td>
  32. </tr>
  33. <tr>
  34. <td class="style1">
  35. Upload Your Image:</td>
  36. <td class="style2">
  37. <asp:FileUpload ID="FileUpload1" runat="server" />
  38. </td>
  39. <td>
  40. <asp:Label ID="Label1" runat="server"></asp:Label>
  41. </td>
  42. </tr>
  43. <tr>
  44. <td class="style1">
  45. </td>
  46. <td class="style2">
  47. <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Upload" />
  48. </td>
  49. <td>
  50. </td>
  51. </tr>
  52. </table>
  54. </div>
  55. </form>
  56. </body>
  57. </html>
Your design looks like the following image:

Design

Code chamber

Step 5: Open Fileupload_demo.aspx.cs file to write code for saving the image to database.

Fileupload_demo.aspx.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.IO;
  8. using System.Data;
  9. using System.Data.SqlClient;
  11. public partial class _Default : System.Web.UI.Page
  12. {
  13. protected void Page_Load(object sender, EventArgs e)
  14. {
  16. }
  17. protected void Button1_Click(object sender, EventArgs e)
  18. {
  19. if (FileUpload1.HasFile)
  20. {
  21. string str = FileUpload1.FileName;
  22. FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Upload/" + str));
  23. string Image = "~/Upload/" + str.ToString();
  24. string name = TextBox1.Text;
  26. SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
  27. SqlCommand cmd = new SqlCommand("insert into tbl_data values(@name,@Image)", con);
  28. cmd.Parameters.AddWithValue("@name", name);
  29. cmd.Parameters.AddWithValue("Image", Image);
  31. con.Open();
  32. cmd.ExecuteNonQuery();
  33. con.Close();
  35. Label1.Text = "Image Uploaded";
  36. Label1.ForeColor = System.Drawing.Color.ForestGreen;
  38. }
  40. else
  41. {
  42. Label1.Text = "Please Upload your Image";
  43. Label1.ForeColor = System.Drawing.Color.Red;
  44. }
  45. }
  46. }
Output chamber

upload image

Output

Hope you liked it. Have a good day. Thank you for reading.