Here, in this article I am going to show you with examples on how to select and upload multiple files at time a using jQuery Multifile plug-in.
You can learn more about this Plug-in here.
This article is in response to queries I have received in my previous article, which was about how to upload multiple files in Asp.Net and it has few limitations.
A Little History
Before migrating to Asp.Net, many of us have possibly worked with Classic ASP and I was one of them. Those days I used to visit many ASP forums, where I read queries from developers, frantically looking for solutions to upload multiple files in one single go.
The solution however, was to create multiple FileUpload controls dynamically using JavaScript. We would create clones of a single FileUpload control and add events to it.
Anyways, that phase have passed and we have better solutions, or let me say plug-in’s these days, which would make it easy.
jQuery Multifile Plug-in
<script src="https://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MultiFile.js"></script>
The jQuery Multifile Plug-in now simplifies this entire process, without too much fuss and you don’t have write lengthy repeated codes. This plug-in effortlessly works in sync with the Asp.Net FileUpload control.
There is one interesting and useful feature I would like to bring it to my readers notice is that you can cancel or remove a selected file or other files by just clicking the small “x” (cross) button at beginning of the files you have selected. (See image above). This is a good feature in this plug-in.
Upload Multiple File using HTML5, jQuery Ajax and Asp.Net Web API
Properties of jQuery Multifile Plug-in
Property accept
Not just multiple, you also have options to select particular type of files there by restricting any types of files getting uploaded on to the server. The property accept will allow you to choose and upload files with particular extensions.
<asp:FileUpload ID="fileUpload" class="multi" accept="jpg|png" runat="server"/>
Property maxlength
This property will restrict the number of files a user can select to upload. In one of my previous articles we have shown how to Upload multiple files using Asp.Net and also restrict the number files to be uploaded on to the server.
One of its cool features is its ability to count and validate files before uploading. Let’s say you have restricted it to “5” files per upload, the Choose file button will be instantly disabled when the specified number of files has been selected by the user.
<asp:FileUpload ID="fileUpload" class="multi" maxlength="5" runat="server" />
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Upload Using jQuery Plug-in</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MultiFile.js">
</script>
<style>
div { font:14px arial; }
div input {
text-align:center;
color:#333;
font:inherit;
background-color:#D6D6D6;
border:solid 1px #999;
border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
line-height:20px;
cursor:pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Multiple File Upload Using jQuery Plug-in</h3>
<p><asp:FileUpload ID="fileUpload" class="multi" runat="server" /></p>
<p><input type="button" id="btUpload" value="Upload Files"
onserverclick="UploadFiles"
runat="server" /></p>
<p><asp:Label ID="lblUploadStatus" runat="server"></asp:Label></p>
</div>
</form>
</body>
</html>
using System; using System.IO; using System.Web; // FOR HttpFileCollection. public partial class _Default : System.Web.UI.Page { public void UploadFiles(object sender, EventArgs args) { if (fileUpload.HasFile) { int iUploadedCnt = 0; HttpFileCollection hfc = Request.Files; for (int i = 0; i <= hfc.Count - 1; i++) // CHECK THE FILE COUNT. { HttpPostedFile hpf = hfc[i]; if (hpf.ContentLength > 0) { // CHECK IF THE SELECTED FILE ALREADY EXISTS IN FOLDER. (AVOID DUPLICATE) if (!File.Exists(Server.MapPath("Uploaded_Files\\") + Path.GetFileName(hpf.FileName))) { // SAVE THE FILE IN A FOLDER. hpf.SaveAs(Server.MapPath("Uploaded_Files\\") + Path.GetFileName(hpf.FileName)); iUploadedCnt += 1; } } // WE HAVE DONE IT. SHOW RESULT. lblUploadStatus.Text = "<b>" + iUploadedCnt + "</b> file(s) Uploaded."; } } } }
Option Explicit On Imports System.IO Partial Class _Default Inherits System.Web.UI.Page Public Sub UploadFiles(ByVal sender As Object, ByVal args As EventArgs) If fileUpload.HasFile Then Dim hfc As HttpFileCollection = Request.Files Dim iUploadedCnt As Integer = 0 For iCnt As Integer = 0 To hfc.Count - 1 ' CHECK THE FILE COUNT. Dim hpf As HttpPostedFile = hfc(iCnt) If hpf.ContentLength > 0 Then ' CHECK IF THE SELECTED FILE ALREADY EXISTS IN FOLDER. (AVOID DUPLICATE) If Not File.Exists(Server.MapPath("Uploaded_Files\") & _ Path.GetFileName(hpf.FileName)) Then ' SAVE THE FILES IN THE FOLDER. hpf.SaveAs(Server.MapPath("Uploaded_Files\") & _ Path.GetFileName(hpf.FileName)) iUploadedCnt = iUploadedCnt + 1 End If End If Next ' WE HAVE DONE IT. SHOW RESULT. lblUploadStatus.Text = "<b>" & iUploadedCnt & "</b> file(s) Uploaded." End If End Sub End Class
Thanks for reading. ☺