Uploading Multiple Files With FileUpload Or JQuery Asp.Net

1:44:00 am 0 Comments

This Example explains How To Upload Multiples Files Using 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.

HTML SOURCE OF PAGE
   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>         
  11:    
  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.

C# CODE
01protected void btnUpload_Click(object sender, EventArgs e)
02    {
03        HttpFileCollection multipleFiles = Request.Files;
04        for (int fileCount = 0; fileCount < multipleFiles.Count; fileCount++)
05        {
06            HttpPostedFile uploadedFile = multipleFiles[fileCount];
07            string fileName = Path.GetFileName(uploadedFile.FileName);
08            if (uploadedFile.ContentLength > 0 )
09            {
10                uploadedFile.SaveAs(Server.MapPath("~/Files/") + fileName);
11                lblMessage.Text += fileName + "Saved <br>";
12            }
13        }
14    }

VB.NET CODE
01Protected Sub btnUpload_Click(sender As Object, e As EventArgs)
02 Dim multipleFiles As HttpFileCollection = Request.Files
03 For fileCount As Integer = 0 To multipleFiles.Count - 1
04  Dim uploadedFile As HttpPostedFile = multipleFiles(fileCount)
05  Dim fileName As String = Path.GetFileName(uploadedFile.FileName)
06  If uploadedFile.ContentLength > 0 Then
07   uploadedFile.SaveAs(Server.MapPath("~/Files/") & fileName)
08   lblMessage.Text += fileName & "Saved <br>"
09  End If
10 Next
11End 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"/>
   6:   
   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

Unknown

0 comments:

Subscribe to: Post Comments (Atom)