Multiple File Upload Using jQuery

vinodkumarnie

4.50/5 (4 votes)

Jan 21, 2013

CPOL

62752

How to select more than one file at a time

Introduction

The code shown in this tip helps to select more than one file at a time. Also, we can remove selected file, can restrict file type, etc. It's easy on user friendly one.

Background

You can refer to this link.

Using the Code

Refer to the code below:

<html >
<head runat="server">
    <title>Multiple file Upload</title>
    <script src="http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.js" 
    type="text/javascript"></script>
    <script src="http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MultiFile.js" 
    type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:FileUpload ID="FileUploadJquery" runat="server" 
        class="multi" accept="jpg|png" />
    
    </div>
    </form>
</body>
</html>

C# code to handle fileupload control:

string fileName1 = "";
string FullName1 = "";
HttpFileCollection uploads = Request.Files;
//for (int fileCount = 0; fileCount < uploads.Count; fileCount++)
for (int fileCount = 1; fileCount < 6; fileCount++)
{
    if (fileCount < uploads.Count)
    {
        HttpPostedFile uploadedFile = uploads[fileCount];
        fileName1 = Path.GetFileName(uploadedFile.FileName);
        if (uploadedFile.ContentLength > 0)
        {
            string[] a = new string[1];
            a = uploadedFile.FileName.Split('.');
            fileName1 = a.GetValue(0).ToString() + 
            "." + a.GetValue(1).ToString();
            uploadedFile.SaveAs(Server.MapPath
            ("mobile_image/mob_img/" + fileName1));
        }
}

The above code:

Restricts the same files
Restricts the number of files to be uploaded
Type of files to be uploaded

etc.

Thank you.