Multiple File Upload Using jQuery Multifile Plug-in with Asp.Net FileUpload Control

I have received queries in the past about how to upload multiple files in case the browsers file selection dialog does not allow us to choose more than one file at a time. We can solve this issue by using the jQuery Multiple File Upload Plug-in.

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.

Multiple File Upload Using JQuery

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

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.

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" />

The Markup

<!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>

Code Behind (C#)

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.";
            }
        }
    }
}

Vb.Net

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. ☺

← PreviousNext →