Attributes and properties for multiple file upload
Attributes and properties that come with the ASP.NET 4.5 FileUplaod control are:
- AllowMultiple: To support multiple file uploads, set AllowMulitple="true" other than false.
- HasFiles: It Checks whether FileUpload control has multiple files or not.
-
PostedFiles: It is used to get all the files from the FileUpload control in the iteration.
The HasFiles and PostedFiles properties will help work with the multiple file uploads in C#.
The syntax for multiple file upload
On the ASPX page, declare a FileUpload control:
<asp:FileUpload runat="server" ID="UploadFiles" AllowMultiple="true" />
Setting the AllowMultiple attribute to "true" is necessary to enable the multiple file upload feature.
The above code will be rendered in the browser as the following HTML:
<input type="file" multiple="multiple" name="UploadFiles" id="UploadFiles" />
Coding example for multiple file upload in ASP.NET
Given below is an example code for multiple file uploads.
ASPX file:
In the following aspx file, we have a FileUpload control with AllowMultiple as true so that multiple files can be uploaded simultaneously. There is upload button that uploads and saves files by calling the uploadFileOnClick method on click. The label will display the names of the files that are uploaded.
<!DOCTYPE html>
<head runat="server">
<title></title>
</head>
<body>
<div>
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFileOnClick" />
<asp:Label ID="uploadedfileslist" runat="server" />
</div>
</body>
</html>
CS file:
When the uploadFileOnClick method is called, it first checks if the FileUpload control with ID UploadImages has multiple files using HasFiles property. If it has files, using foreach loop and PostFiles property, we iterate over all the files uploaded and save them in the Images folder and display each file one below the other.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace UploadMultipleExample
{
public partial class UploadMultipleFilesExample : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void uploadFileOnClick(object sender, EventArgs e)
{
if (UploadImages.HasFiles) {
foreach(HttpPostedFile uploadedFile in UploadImages.PostedFiles) {
uploadedFile.SaveAs(System.IO.Path.Combine(Server.MapPath("~/Images/"), uploadedFile.FileName));
uploadedfileslist.Text += String.Format("{0}<br />", uploadedFile.FileName);
}
}
}
}
}
Output:
Click Choose Files button to select multiple files
After selecting multiple files and uploading them simultaneously
The files saved in the Images folder in the application
FAQs
-
Which browsers support multiple file uploads in ASP.NET?
Multiple file uploads feature in ASP.NET is only available in browsers supporting HTML5, i.e., Internet Explorer (IE10) or higher, Firefox, and Chrome.
-
What does HttpPostedFile do?
The HttpPostedFile class has properties and methods for getting information on a specific file and reading and saving it.
-
What does Server.MapPath() do?
The MapPath method is used to define a relative virtual path for a physical directory on the server.
-
What does file.SaveAs() do?
The SaveAs method stores the contents of an uploaded file on the Web server to a specified destination. After the user picks a file to upload, the FileUpload control does not automatically save it to the server. To allow the user to send the requested file, you must explicitly provide a control or mechanism.
-
What is System.IO.Path.Combine() used for?
This method is used to merge the path of the file with another string.
Key Takeaways
From this article, we learned about Multiple Fileupload in ASP.Net. We saw how it is practically implemented through code.
Apart from this, you can also expand your knowledge by referring to these articles on Features Of ASP Net and ASP Full Form.
But this is not enough; you need something extra to excel in web development truly. If you want to learn more about web development, you can read our articles or take our highly curated Web Development course.
310+ registered 
