Upload Multiple Files With FileUpload Or JQuery In Asp.Net

This Example explains How To Upload Multiples Files With FileUpload Or JQuery In Asp.Net.

I have placed four FileUpload Controls and one button on page, Code to save uploaded files to server is written in Click Event of Button.

Download JQuery.js and jQuery.MultiFile.js from JQuery multiple-file-upload plugin site.

Default File size limit is 4 mb but we can upload large files by changing configuration in web.config.

   1:  <form id="form1" runat="server">
   2:  <div>
   3:  <asp:FileUpload ID="FileUpload1" runat="server" />
   4:  <br />
   5:  <asp:FileUpload ID="FileUpload2" runat="server" />
   6:  <br />
   7:  <asp:FileUpload ID="FileUpload3" runat="server" />
   8:  <br />
   9:  <asp:FileUpload ID="FileUpload4" runat="server" />
  10:  </div>         
  12:  <asp:Button ID="btnUpload" runat="server" 
  13:              onclick="btnUpload_Click" 
  14:              Text="Upload Files"/>
  15:  </form>

FileUpload Multiple Files In Asp.Net jQuery

Write this code in btnUpload_Click Event in code behind.

protected void btnUpload_Click(object sender, EventArgs e)
        HttpFileCollection multipleFiles = Request.Files;
        for (int fileCount = 0; fileCount < multipleFiles.Count; fileCount++)
            HttpPostedFile uploadedFile = multipleFiles[fileCount];
            string fileName = Path.GetFileName(uploadedFile.FileName);
            if (uploadedFile.ContentLength > 0 )
                uploadedFile.SaveAs(Server.MapPath("~/Files/") + fileName);
                lblMessage.Text += fileName + "Saved 
"; } } }

Protected Sub btnUpload_Click(sender As Object, e As EventArgs)
 Dim multipleFiles As HttpFileCollection = Request.Files
 For fileCount As Integer = 0 To multipleFiles.Count - 1
  Dim uploadedFile As HttpPostedFile = multipleFiles(fileCount)
  Dim fileName As String = Path.GetFileName(uploadedFile.FileName)
  If uploadedFile.ContentLength > 0 Then
   uploadedFile.SaveAs(Server.MapPath("~/Files/") & fileName)
   lblMessage.Text += fileName & "Saved 
" End If Next End Sub

Upload Multiple Files Using JQuery
Add JQuery And it's Plugin i mentioned above in solution and add reference to these scripts in html source of page.
   1:  <head runat="server">
   2:  <title></title>
   3:  <script src="jquery.js" type="text/javascript"/>
   4:  <script src="jquery.MultiFile.js" type="text/javascript"/>
   5:  </head>

Place one FileUpload Control on page and class="multi" in it's html source.
   1:  <form id="form1" runat="server">
   2:  <div>
   3:  <asp:FileUpload ID="FileUploadJquery" 
   4:                  runat="server" 
   5:                  class="multi"/>
   7:  <asp:Button ID="btnJqueryMultipleFiles" 
   8:              runat="server" Text="Upload Files Using Jquery" 
   9:              onclick="btnJqueryMultipleFiles_Click"/>
  10:  </div>
  11:  </form>

Write Same code i mentioned above in Click Event of upload button, build and run the application.
JQuery Upload Multiple Files Asp.Net

Download Sample Code

If you like this post than join us or share


Courtney Winter said...

This comment has been removed by a blog administrator.

Find More Articles