In this article I will explain with an example, how to upload multiple files using FileUpload Control in ASP.Net 3.5 using C# and VB.Net.
This article makes use of ASP.Net version 3.5.
 
 
HTML Markup
The following HTML Markup consists of a form.
The form has been specified with enctype=“multipart/form-data” attribute as it is necessary for File Upload operation.
The form consists of an HTML Input Button, an HTML DIV, a SPAN and an ASP.Net Button control.
The ASP.Net Button has been assigned with an OnClick event handler.
<form id="form1" runat="server" enctype="multipart/form-data">
    <span>Click to add files</span>&nbsp;&nbsp;
    <input type="button" value="Add" onclick="AddFileUpload()" />
    <br /><br />
    <div id="FileUploadContainer">
        <!--FileUpload Controls will be added here -->
    </div>
    <br />
    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</form>
 
 
Adding and Removing FileUpload Controls using JavaScript
Adding FileUpload Control
When the Add Button is clicked, the AddFileUpload JavaScript function will be called.
Inside this JavaScript function, a HTML DIV element is created and a HTML FileUpload Control along with HTML Button is added to it using the appendChild function.
The Remove Button has been assigned with JavaScript onclick event handler.
 
Removing FileUpload Control
When the Remove Button is clicked, the RemoveFileUpload JavaScript function will be called.
Inside this JavaScript function, ASP.Net FileUpload control along with the HTML Button is removed from the DIV element using the removeChild function.
 
<script type="text/javascript">
    var counter = 0;
    function AddFileUpload() {
        var div = document.createElement('DIV');
        div.innerHTML = '<input id="file' + counter + '" name="file' + counter + '" type="file" />' +
                        '<input id="btn' + counter + '" type="button" value="Remove" onclick="RemoveFileUpload(this)" />';
        document.getElementById("FileUploadContainer").appendChild(div);
        counter++;
    }
    function RemoveFileUpload(div) {
        document.getElementById("FileUploadContainer").removeChild(div.parentNode);
    }
</script>
 
 
Uploading Files to Server Folder in AS.Net 3.5
When the Upload Button is clicked, the following event handler is executed.
Inside this event handler, first a check is performed whether the Folder (Directory) exists. If it does not then, the Folder (Directory) is created.
Then, a loop is executed over the Request.Files collection and one by one each file is saved in to the Folder (Directory).
C#
protected void btnUpload_Click(object sender, EventArgs e)
{
    string folderPath = Server.MapPath("~/Files/");
 
    //Check whether Directory (Folder) exists.
    if (!Directory.Exists(folderPath))
    {
        //If Directory (Folder) does not exists. Create it.
        Directory.CreateDirectory(folderPath);
    }
 
    for (int i = 0; i < Request.Files.Count; i++)
    {
        HttpPostedFile postedFile = Request.Files[i];
        if (postedFile.ContentLength > 0)
        {
            //Save the File to the Directory (Folder).
            postedFile.SaveAs(folderPath + Path.GetFileName(postedFile.FileName));
        }
    }
}
 
VB.Net
Protected Sub btnUpload_Click(ByVal sender As Object, By Val e As EventArgs)
    Dim folderPath As String = Server.MapPath("~/Files/")
    'Check whether Directory (Folder) exists.
 
    If Not Directory.Exists(folderPath) Then
        Directory.CreateDirectory(folderPath)
    End If
 
    For i As Integer = 0 To Request.Files.Count - 1
        'If Directory (Folder) does not exists. Create it.
        Dim postedFile As HttpPostedFile = Request.Files(i)
 
        If postedFile.ContentLength > 0 Then
            'Save the File to the Directory (Folder).
            postedFile.SaveAs(folderPath & Path.GetFileName(postedFile.FileName))
        End If
    Next
End Sub
 
 
Setting maxRequestLength and executionTimeout in the Web.Config file
You will need to set the following setting in the system.web section of the Web.Config file.
The executionTimeout value is set to 540 seconds while the maxRequestLength is set to the maximum size of the files in Bytes.
<httpRuntime executionTimeout="540" maxRequestLength="904857600" />
 
 
Screenshot
ASP.Net 3.5: Uploading Multiple Files using FileUpload Control
 
 
Browser Compatibility

The above code has been tested in the following browsers.
Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code


Other available versions