Post
Ask Question

How to Upload and Save Images Into Database Using ASP.Net

In ASP.NET, two controls are available to upload the files to the web server. When the server receives the posted file data, the application can save, ignore, or check it.

There are the following two controls that allow file uploading.

  • HtmlInputFile.
  • FileUpload.

Both controls define an important role in file uploading, but the FileUpload control automatically sets the encoding of the form, whereas HtmlInputFile can't perform this process.

In this article we will use the FileUpload control. The FileUpload control allows users to browse and select the file to be uploaded. FileUpload control provides a file browse button and textbox for entering the filename. Basically the FileUpload class is derived from the WebControl Class. The FileUpload class has the following properties:

  • FileBytes.
  • FileName.
  • FileContent.
  • PostedFile.
  • HasFile.

Step 1

Start Visual Studio.


Figure 1: Start Visual Studio

Step 2

Now we need to create a website using "File" -> "New" -> "Website".


Figure 2: Create Website

Step 3

Now, select the ASP.NET Empty Website and click on the OK button.


Figure 3: ASP.NET Empty Website

Step 4

Now, add the Web form by right-clicking on the website and provide a name for the Webform.


Figure 4: Add Web Form

Step 5

Now we will design the web form as in the following.


We take the label tool to display the message, whether the image is uploaded or not.

Figure 5: Design Page

Step 6

Now we need to create a table in SQL Server, depending on the requirements.

  1. create table upload1(uname varchar(50),image varchar(100));  

Step 7

After table creation we will write the following code for the button click.

  1. protected void Button1_Click(object sender, EventArgs e)   
  2. {  
  3.     SqlConnection con = new SqlConnection("Data Source=MCNDESKTOP34;Initial Catalog=yatendra;User ID=sa;Password=Password$2");  
  4.     if (FileUpload1.HasFile)   
  5.     {  
  6.         string strname = FileUpload1.FileName.ToString();  
  7.         FileUpload1.PostedFile.SaveAs(Server.MapPath("~/upload/") + strname);  
  8.         con.Open();  
  9.         SqlCommand cmd = new SqlCommand("insert into upload1 values('" + txtname.Text + "','" + strname + "')", con);  
  10.         cmd.ExecuteNonQuery();  
  11.         con.Close();  
  12.         Label1.Visible = true;  
  13.         Label1.Text = "Image Uploaded successfully";  
  14.         txtname.Text = "";  
  15.     }   
  16.     else   
  17.     {  
  18.         Label1.Visible = true;  
  19.         Label1.Text = "Plz upload the image!!!!";  
  20.     }  
  21. }  

Step 8

Now we need to execute the website on the web browser by pressing the F5 key and we will get the following window on the web browser.


Figure 6: Output Window 

Step 9

Now we will give the Username and click on Choose File.


Figure 7: Upload Image

Click on the upload image button then the message appears on the screen "Image Uploaded successfully".


Figure 8: Image Uploaded

Step 10

Now we will check the database that the data arrived or not in the database by the select command.


Figure 9: Check Database

Summary

In this article, I explained how to upload images to a database using ASP.NET.

I hope this is helpful for beginners when they want to upload images in their  projects.


Similar Articles