Post
Ask Question

Multiple Files Upload Using File Upload Control in ASP.Net

Initial Chamber

Step 1

Open Visual Studio 2010 and Create an Empty Website and give it a suitable name (FileUpload_demo).

Step 2

In Solution Explorer you will get your empty website. Now,  add a web form, SQL Database and 3 CSS files as in the following.

For the Web Form

FileUpload_demo (your empty website), then right-click and Add New Item. Now, select Web Form and name it Fileupload_demo.aspx.

Get back to your website in Solution Explorer and Add New Folder and name it Images.

Add New Folder

Design Chamber

In the design I did not include any CSS, if you want to design it then you can do that by making the Style in the <head></head> tag. I have just included how it is done to upload multiple files in the fileupload control. If anyone wants the CSS of the file upload then just comment me and I'll arrange it and get back to you.

This is the design code for the File Upload Control:

  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: 258px;  
  12.         }  
  13.         .style2  
  14.         {  
  15.             width: 168px;  
  16.         }  
  17.         .style3  
  18.         {  
  19.             text-decoration: underline;  
  20.             text-align: center;  
  21.             color: #9966FF;  
  22.         }  
  23.     </style>  
  24. </head>  
  25. <body>  
  26.     <form id="form1" runat="server">  
  27.     <div>  
  28.         <br />  
  29.       
  30.     </div>  
  31.     <p class="style3">  
  32.         <strong style="font-size: large">Multiple FileUpload in Asp.Net</strong></p>  
  33.     <table style="width:100%;">  
  34.         <tr>  
  35.             <td class="style1">  
  36.                 <asp:FileUpload ID="FileUpload1" runat="server" />  
  37.             </td>  
  38.             <td class="style2">  
  39.                 <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Upload" />  
  40.             </td>  
  41.             <td>  
  42.                 <asp:Label ID="lblmsg" runat="server"></asp:Label>  
  43.             </td>  
  44.         </tr>  
  45.         <tr>  
  46.             <td class="style1">  
  47.                  </td>  
  48.             <td class="style2">  
  49.                  </td>  
  50.             <td>  
  51.                  </td>  
  52.         </tr>  
  53.     </table>  
  54.     </form>  
  55. </body>  
  56. </html>  
Or you can make it by dragging the control from the toolbox and placing it into your .aspx page. Try to drag all the controls in one HTML table and in that way your design looks good. Yeah! Probably my design is not so worthy right now, but someday I'll start some CSS articles too.

Your design looks as in the following:

Design Looks

Code Chamber

Now we are entering into our Code Zone. Let's begin by adding a namespace as in the following:

adding a Namespace

Open your Fileupload_demo.aspx.cs file and add this code.

Here is the code:
  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.   
  9. public partial class _Default : System.Web.UI.Page  
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.         FileUpload1.Attributes["multiple"] = "multiple";  
  14.     }  
  15.   
  16.     protected void Button1_Click(object sender, EventArgs e)  
  17.     {  
  18.         for (int i = 0; i < Request.Files.Count; i++)  
  19.         {  
  20.             HttpPostedFile fu = Request.Files[i];  
  21.             if (fu.ContentLength > 0)  
  22.             {  
  23.                 try  
  24.                 {  
  25.                     string fileName = Path.GetFileName(fu.FileName);  
  26.                     fu.SaveAs(Server.MapPath("~/Images/") + fileName);  
  27.   
  28.                     lblmsg.Text = "Files have been Uploaded";  
  29.                     lblmsg.ForeColor = System.Drawing.Color.Green;  
  30.                 }  
  31.                 catch (Exception ex)  
  32.                 {  
  33.                     lblmsg.Text = "File Could not be uploaded" + ex.Message;  
  34.                     lblmsg.ForeColor = System.Drawing.Color.Red;  
  35.                 }  
  36.             }  
  37.   
  38.         }  
  39.     }  
  40. }  
Output Chamber

browser

select these file

As you browse you can select as many files you want to upload. Select it and click on Upload.
Click on Upload

Upload
You can see the files in your images folder that you made in the initial steps.

images

I hope you will enjoy this. Thank You for reading.
Have a Nice Day.


Similar Articles