ARTICLE

Multiple File Upload using JQuery in ASP.NET 3.5

Posted by Purushottam Rathore Articles | JQuery December 21, 2010
Through this article you will learn how to upload multiple file using JQuery in ASP.NET 3.5.
Reader Level:
 

Download uploaded file from this article. In JQuery folder you will get two JQuery files first is 'jquery-1.3.2.js' and another is 'jquery.MultiFile.js'.


Default.aspx:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="jquery-1.3.2.js" type="text/javascript"></script>

    <script src="jquery.MultiFile.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

   <div>

        <asp:FileUpload ID="FileUpload1" runat="server"/>

        <br />

        <asp:Button ID="btnUpload" runat="server" Text="Upload All"

            onclick="btnUpload_Click" />

    </div>

    </form>

</body>

</html>

 

Default.aspx.cs:

protected void btnUpload_Click(object sender, EventArgs e)

{

    HttpFileCollection hfc = Request.Files;

    for (int i = 0; i < hfc.Count; i++)

    {

        HttpPostedFile hpf = hfc[i];

        if (hpf.ContentLength > 0)

        {

            hpf.SaveAs(Server.MapPath("MyFiles") + "\\" + System.IO.Path.GetFileName(hpf.FileName));

            Response.Write("<b>File: </b>" + hpf.FileName + " <b>Size:</b> " + hpf.ContentLength + " <b>Type:</b> " + hpf.ContentType + " Uploaded Successfully <br/>");

        }

    }

}


Output: Press f5 and Select various images which you want to upload and click on 'Upload All' button. If you want to delete any selected image you may click on delete image button.
 

UplodedMultipleimages.JPG

Figure 1:

After click on 'Upload All' button all selected images will save in appropriate directory and display successful message like as follows:

upload2.JPG 

Figure 2: Successful message after save all images.

Login to add your contents and source code to this article
post comment
     

Hi, thanks for the post. Can we limit the no. of file selection?

Posted by Amit Dec 04, 2012

It is very helpful.....

Posted by keyur soni Sep 12, 2012

Thanks for your Post. I need Single file upload using jquery. And Support IE BrowsersThanks

Posted by balaji selvarajan Jul 27, 2012

sry I am not able to select multiselection......

Posted by nagasaibabu neela Apr 11, 2011

Hi, I am very thankful for ur work.But in this i am not able to select mutliple files at once.That means when i browse i have to select multiple files.can you please tell me regarding this.

Posted by nagasaibabu neela Apr 11, 2011
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
Join a Chapter
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Join a Chapter