Here I will explain how one can create a multiple file uploading controls in a very simple manner and very less amount of code. With this example one will able to perform the following functions
Below is the HTML markup of the page. As you can see I have added a HTML button in order to add new FileUpload Controls, a DIV FileUploadContainer in which the dynamic FileUpload Controls will be added and a ASP.Net Upload Button in order to upload the files when the Upload Button us clicked.
An important think to note that you will need to add enctype="multipart/form-data to the form in order to allow the uploading of files through dynamic FileUpload controls.
<form id="form1" runat="server" enctype="multipart/form-data" method = "post">
<span style ="font-family:Arial">Click to add files</span>
<input id="Button1" type="button" value="add" onclick = "AddFileUpload()" />
<br /><br />
<div id = "FileUploadContainer">
<!--FileUpload Controls will be added here -->
<asp:Button ID="btnUpload" runat="server"
Text="Upload" OnClick="btnUpload_Click" />
var counter = 0;
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
'" type="file" />' +
'<input id="Button' + counter + '" type="button" ' +
'value="Remove" onclick = "RemoveFileUpload(this)" />';
As you will notice above first I am creating a DIV element and then adding a HTML FileUpload Control along with a HTML Button in order to remove the FileUpload Controls. Also onclick of the Remove button I am calling the RemoveFileUpload function which removes the dynamically created FileUpload control.
Server Side Uploading of Files
Server Side I have written the following code in the Click event of the Upload Button
protected void btnUpload_Click(object sender, EventArgs e)
for (int i = 0; i < Request.Files.Count; i++)
HttpPostedFile PostedFile = Request.Files[i];
if (PostedFile.ContentLength > 0)
string FileName = System.IO.Path.GetFileName(PostedFile.FileName);
PostedFile.SaveAs(Server.MapPath("Files\\") + FileName);
Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs)
For i As Integer = 0 To Request.Files.Count - 1
Dim PostedFile As HttpPostedFile = Request.Files(i)
If PostedFile.ContentLength > 0 Then
Dim FileName As String = System.IO.Path.GetFileName(PostedFile.FileName)
PostedFile.SaveAs(Server.MapPath("Files\") + FileName)
In the above code snippet I am simply looping through the Request.Files Collection which contains the uploaded Files and then I am saving each of them one by one in a Folder called Files within my website root folder.
Since this article deals with uploading multiple files it is important to discuss the maximum file size allowed. By default ASP.Net allows files of size maximum 4MB at a time. Hence in order to upload more data we will need to increase this limit. Refer the httpRuntime section of the Web.Config, if it is not present in your Web.Config you can simply paste the one given below in your file.
In order to increase the maximum file size limit you will need to change the value of the maxRequestLength attribute in kilobytes (KB). For example if you want to set the upload limit to 10 MB you will have to set the value to 10240. Another important parameter is executionTimeout. It determines the maximum amount of time in seconds ASP.Net will process the request and after which it will stop the processing. By default the value is 110 seconds. You can modify it to the value that suits your needs
above code has been tested in the following browsers.
browser logos displayed above are property of their respective owners.
MultipleFileUpload.zip (3.95 kb)