Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to upload multiple files using jQuery in ASP.NET

Author: Rachel Nicole
Download Source Code : 1287_UploadMultipleFilesJQuery.zip

The purpose of this article is to explain that how you can upload multiple files in your ASP.NET application using jQuery.

 

Uploading multiple files using jQuery in ASP.NET is easy. We don’t need multiple FileUpload controls in our aspx page. You can upload multiple files with single FileUpload control. You can also set limit for number of files to upload and can mention specific files to upload.

  1. Open Visual Studio 2010
  2. File > New > Web Site
  3. Visual Basic or Visual C#  > ASP.NET Empty Web Site
  4. Right click on web site > Add New Item > Web Form
  5. Right click on website > New Folder (Name the folder as “MyFolder”)
  6. Right click on website > New Folder (Name the folder as “Scripts”). Download jQuery and jQuery MultiFile plugin and include these files in this folder. 
  7. Add two <script> tags in between <head> tag of Default.aspx page. You have to give reference for both jQuery and jQuery MultiFile plugin as below. 

    <head runat="server">
       
        <title>Upload Multiple files using jQuery</title>
       
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
       
        <script type="text/javascript" src="Scripts/jquery.MultiFile.js"></script>
       
    </head>

     
  8.  Write code below in Default.aspx page in between <form> tag

    <div>
       
        <asp:FileUpload ID="FileUpload1" runat="server" class="multi" maxlength="3" accept="xls|xlsx|doc|docx|gif|jpeg|jpg" />
       
        <br />
       
        <asp:Button ID="Button1" runat="server" Text="Upload Files"
       
            onclick="Button1_Click" />
       
        <br />
       
        <asp:Label ID="Label1" runat="server" ></asp:Label>
       
    </div>

     
    Add a FileUpload control, a Button control and a Label control. You have to add “class” attribute of FileUpload control and set it to “multi”. This attribute is necessary for multiple file upload using jQuery. You can also add “maxlength” and “accept” attributes. “maxlength” attributes limits the number of files to upload at a time. “accept” attribute allows to include extensions for files that can be uploaded.
     
  9.  Add namespace in code behind file

    C#
     
    using System.IO;
     
    VB.NET
     
    Imports System.IO
     
  10. Now write code below in Button click event in code behind file.

    C#
     
    protected void Button1_Click(object sender, EventArgs e) {
        HttpFileCollection fileCollection = Request.Files;
        for (int i = 0; i < fileCollection.Count; i++) {
            HttpPostedFile postedFile = fileCollection[i];
            if (postedFile.ContentLength > 0) {
                string filePath = Server.MapPath("MyFolder") + "\\" + Path.GetFileName(postedFile.FileName);
                postedFile.SaveAs(filePath);
                Label1.Text = "Files uploaded successfully";
            }
        }
     
    }
     
    VB.NET

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim FileCollection As HttpFileCollection = Request.Files
        For i As Integer = 0 To FileCollection.Count - 1
            Dim postedFile As HttpPostedFile = FileCollection(i)
            If postedFile.ContentLength > 0 Then
                Dim filePath As String = Server.MapPath("MyFolder") + "\\" + Path.GetFileName(postedFile.FileName)
                postedFile.SaveAs(filePath)
                Label1.Text = "Files uploaded successfully"
            End If
        Next i
    End Sub


    “HttpFileCollection” class is used to retrieve posted files. We loop through the file and get the each posted file by using “HttpPostedFile” class. We get the file name by using FileName() method of “HttpPostedFile” class. At the end we saved our files in the specified folder by using SaveAs() method of “HttpPostedFile” class.
     
  11. Build website and view in browser. Select files and click on Button.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to implement Keyboard Shortcuts using jQuery in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net