👉 You may also like this post... How to upload Multiple files using HTML5, jQuery Ajax and Asp.Net Web API
Some tips for beginners
✔️ Elements used in this example.
For file upload, we will use Asp.Net "FileUpload" control with HttpFileCollection class.
✔️ Extra features in this example.
In addition, we will also see how we can restrict or limit the number files to be uploaded. The limit we will set in our example is 10.
Limiting or restricting the number of files for upload using Asp.Net has its advantages.
01) It will not put unnecessary burden on the Host server, and save valuable bandwidth.
02) We can efficiently upload multiple files at a time, and in the process check the permissible size, type of files etc, at the server side using code behind procedures.
We will also check for duplicate files before uploading the files to the server, "ignoring" the files extension. That is, we will not upload more than one file with the same name, irrespective of the file type.
For example: If the first file is 1.jpeg and it is uploaded, then 1.pdf will be considered duplicate and will not be uploaded.
✔️ Asp.Net FileUpload control
The Asp.Net FileUpload control is a combination of a "Textbox" and a "Button" control. Together it will allow us to select file(s) to upload at a remote location. Clicking the button will pop up a "Dialog box or a Window", which will show a list of Folders and Files in the drive of your local machine. The Textbox will show the full path with the selected file(s) name.
By default, the "FileUpload" control will allow the users to select a "single" file at a time. This is how it looks when you first add it to the web page.
<asp:FileUpload ID="fileUpload" runat="server" />
To allow users to select Multiple files just add multiple="true".
<asp:FileUpload ID="fileUpload" multiple="true" runat="server" />Finally, we will upload the files using Asp.Net HttpFileCollection class. This class will keep an eye on all the files uploaded from client side. There by giving vital information about the file size, type etc. Along with it we will use System.IO namespace, which will allow us to check for duplicate files in a particular Folder or Directory on the server.
You can also use jQuery Multifile Plug-in to upload multiple files quickly and efficiently in Asp.Net. This plug-in has Select and Un-select options.
Let's get on with the example.
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Upload</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divFile">
<h3>Multiple File Upload in Asp.Net (C#)</h3>
<p>
<asp:FileUpload ID="fileUpload" multiple="true" runat="server" />
</p>
<p>
<asp:Button ID="btUpload" Text ="Upload Files"
OnClick="Upload_Files" runat="server" />
</p>
<%--SHOW UPLOAD MESSAGE--%>
<p><asp:label id="lblFileList" runat="server"></asp:label></p>
<p><asp:Label ID="lblUploadStatus" runat="server"></asp:Label></p>
<p><asp:Label ID="lblFailedStatus" runat="server"></asp:Label></p>
</div>
</form>
</body>We'll also do a simple validation at the client side. Check if the user has selected any file before calling the server side function.
<script>
$('#btUpload').click(function() {
if (fileUpload.value.length == 0) { // CHECK IF FILE(S) SELECTED.
alert('No files selected.');
return false;
}
});
</script>
</html>👉 Now, if you want to check the file size before uploading, you must check this example.
using System;
using System.IO;
using System.Web;
public partial class _Default : System.Web.UI.Page
{
protected void Upload_Files(object sender, EventArgs e)
{
if (fileUpload.HasFile) // CHECK IF ANY FILE HAS BEEN SELECTED.
{
int iUploadedCnt = 0;
int iFailedCnt = 0;
HttpFileCollection hfc = Request.Files;
lblFileList.Text = "Select <b>" + hfc.Count + "</b> file(s)";
if (hfc.Count <= 10) // 10 FILES RESTRICTION.
{
for (int i = 0; i <= hfc.Count - 1; i++)
{
HttpPostedFile hpf = hfc[i];
if (hpf.ContentLength > 0)
{
if (!File.Exists(Server.MapPath("CopyFiles\\") +
Path.GetFileName(hpf.FileName)))
{
DirectoryInfo objDir = new DirectoryInfo(Server.MapPath("CopyFiles\\"));
string sFileName = Path.GetFileName(hpf.FileName);
string sFileExt = Path.GetExtension(hpf.FileName);
// CHECK FOR DUPLICATE FILES.
FileInfo[] objFI = objDir.GetFiles(sFileName.Replace(sFileExt, "") + ".*");
if (objFI.Length > 0)
{
// CHECK IF FILE WITH THE SAME NAME EXISTS (IGNORING THE EXTENTIONS).
foreach (FileInfo file in objFI)
{
string sFileName1 = objFI[0].Name;
string sFileExt1 = Path.GetExtension<(objFI[0].Name);
if (sFileName1.Replace(sFileExt1, "") == sFileName.Replace(sFileExt, ""))
{
iFailedCnt += 1; // now allowing duplicate.
break;
}
}
}
else
{
// save the file in a folder.
hpf.SaveAs(Server.MapPath("CopyFiles\\") +
Path.GetFileName(hpf.FileName));
iUploadedCnt += 1;
}
}
}
}
lblUploadStatus.Text = "<b>" + iUploadedCnt + "</b> file(s) Uploaded.";
lblFailedStatus.Text = "<b>" + iFailedCnt +
"</b> duplicate file(s) could not be uploaded.";
}
else lblUploadStatus.Text = "Max. 10 files allowed.";
}
else lblUploadStatus.Text = "No files selected.";
}
}
Option Explicit On
Imports System.IO
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Upload_Files(sender As Object, e As EventArgs)
' CHECK IF ANY FILE HAS BEEN SELECTED.
If fileUpload.HasFile Then
Dim iUploadedCnt As Integer = 0
Dim iFailedCnt As Integer = 0
Dim hfc As HttpFileCollection = Request.Files
lblFileList.Text = "Select <b>" & hfc.Count & "</b> file(s)"
If hfc.Count <= 10 Then ' 10 FILES RESTRICTION.
For i As Integer = 0 To hfc.Count - 1
Dim hpf As HttpPostedFile = hfc(i)
If hpf.ContentLength > 0 Then
If Not File.Exists(Server.MapPath("CopyFiles\") & _
Path.GetFileName(hpf.FileName)) Then
Dim objDir As New DirectoryInfo(Server.MapPath("CopyFiles\"))
Dim objFI As FileInfo() = _
objDir.GetFiles(Replace(Path.GetFileName(hpf.FileName), _
Path.GetExtension(hpf.FileName), "") & ".*")
If objFI.Length > 0 Then
' CHECK IF FILE WITH SAME NAME EXISTS (IGNORING THE EXTENTIONS).
For Each file As FileInfo In objFI
If Replace(objFI(0).Name, Path.GetExtension(objFI(0).Name), "") = _
Replace(Path.GetFileName(hpf.FileName),
Path.GetExtension(hpf.FileName), "") Then
iFailedCnt = iFailedCnt + 1
Exit For
End If
Next
Else
' SAVE THE FILE IN A FOLDER.
hpf.SaveAs(Server.MapPath("CopyFiles\") & _
Path.GetFileName(hpf.FileName))
iUploadedCnt = iUploadedCnt + 1
End If
End If
End If
Next i
lblUploadStatus.Text = "<b>" & iUploadedCnt & "</b> file(s) Uploaded."
lblFailedStatus.Text = "<b>" & iFailedCnt & _
"</b> duplicate file(s) could not be uploaded."
Else
lblUploadStatus.Text = "Max. 10 files allowed."
End If
Else
lblUploadStatus.Text = "No files selected."
End If
End Sub
End ClassFor single file upload just add the below code in the "Button" click event.
fileUpload.SaveAs(Server.MapPath("CopyFiles\" & fileUpload.FileName))Note: "CopyFiles\" is the name of the folder at the server, in which the files will uploaded.
Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 11 - Yes | Safari - Yes