Post
Ask Question

Save Images In A Folder In ASP.NET Using FileUpload Control

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 by following these steps:

For Web Form:

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

Again get back to your website in Solution Explorer and Add New Folder and give a name  [New Folder, then Images].

default page

Design chamber

Step 4: Open Fileupload_demo.aspx file to create our design, we will drag an HTML table, three FileUpload controls, three buttons and three labels.

Fileupload_demo.aspx.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  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: 281px;  
  12.         }  
  13.     </style>  
  14. </head>  
  15. <body>  
  16.     <form id="form1" runat="server">  
  17.     <div>  
  18.       
  19.         <table style="width:100%;">  
  20.             <tr>  
  21.                 <td class="style1">  
  22.                      </td>  
  23.                 <td>  
  24.                      </td>  
  25.                 <td>  
  26.                      </td>  
  27.             </tr>  
  28.             <tr>  
  29.                 <td class="style1">  
  30.                     <asp:FileUpload ID="FileUpload1" runat="server" Width="211px" />  
  31.  </td>  
  32.                 <td>  
  33.                     <asp:FileUpload ID="FileUpload2" runat="server" />  
  34.                 </td>  
  35.                 <td>  
  36.                     <asp:FileUpload ID="FileUpload3" runat="server" />  
  37.                 </td>  
  38.             </tr>  
  39.             <tr>  
  40.                 <td class="style1">  
  41.                     <asp:Label ID="Label1" runat="server"></asp:Label>  
  42.                 </td>  
  43.                 <td>  
  44.                     <asp:Label ID="Label2" runat="server"></asp:Label>  
  45.                 </td>  
  46.                 <td>  
  47.                     <asp:Label ID="Label3" runat="server"></asp:Label>  
  48.                 </td>  
  49.             </tr>  
  50.             <tr>  
  51.                 <td class="style1">  
  52.                     <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Upload" />  
  53.                 </td>  
  54.                 <td>  
  55.                     <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Upload" />  
  56.                 </td>  
  57.                 <td>  
  58.                     <asp:Button ID="Button3" runat="server" onclick="Button3_Click" Text="Upload" />  
  59.                 </td>  
  60.             </tr>  
  61.         </table>  
  62.       
  63.     </div>  
  64.     </form>  
  65. </body>  
  66. </html>  
Your design looks like the following image:

Design
Code chamber

Step 5: Open Fileupload_demo.aspx.cs file to write the following code for our three FileUpload controls.

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.Data.SqlClient;  
  8. using System.Data;  
  9. using System.IO;  
  10.   
  11. public partial class _Default : System.Web.UI.Page  
  12. {  
  13.     protected void Page_Load(object sender, EventArgs e)  
  14.     {  
  15.   
  16.     }  
  17.     protected void Button1_Click(object sender, EventArgs e)  
  18.     {  
  19.           
  20.         if (FileUpload1.HasFile)  
  21.         {  
  22.   
  23.             FileUpload1.SaveAs(Server.MapPath("images//" + FileUpload1.FileName));  
  24.             Label1.Text = "Image Uploaded";  
  25.             Label1.ForeColor = System.Drawing.Color.ForestGreen;  
  26.         }  
  27.         else  
  28.         {  
  29.             Label1.Text = "Please Select your file";  
  30.             Label1.ForeColor = System.Drawing.Color.Red;  
  31.         }  
  32.     }  
  33.     protected void Button2_Click(object sender, EventArgs e)  
  34.     {  
  35.         if (FileUpload2.HasFile)  
  36.         {  
  37.             string fileName = Path.Combine(Server.MapPath("~/images"), FileUpload2.FileName);  
  38.             FileUpload2.SaveAs(fileName);  
  39.             Label2.Text = "Image Uploaded";  
  40.             Label2.ForeColor = System.Drawing.Color.ForestGreen;  
  41.         }  
  42.         else  
  43.         {  
  44.             Label2.Text = "Please Select your file";  
  45.             Label2.ForeColor = System.Drawing.Color.Red;  
  46.         }  
  47.   
  48.     }  
  49.     protected void Button3_Click(object sender, EventArgs e)  
  50.     {  
  51.         if (FileUpload3.HasFile)  
  52.         {  
  53.             string fileName = Path.GetFileName(FileUpload3.PostedFile.FileName);  
  54.             FileUpload3.PostedFile.SaveAs(Server.MapPath("~/images/") + fileName);  
  55.         
  56.             Label3.Text = "Image Uploaded";  
  57.             Label3.ForeColor = System.Drawing.Color.ForestGreen;  
  58.         }  
  59.         else  
  60.         {  
  61.             Label3.Text = "Please Select your file";  
  62.             Label3.ForeColor = System.Drawing.Color.Red;  
  63.         }  
  64.           
  65.   
  66.     }  
  67. }  
Output chamber

Output

upload image

Now check this image in the images folder in the Solution Explorer or in our project.

solution Explorer

You can check out all other FileUpload controls that they are working or not.


Similar Articles