SIGN UP MEMBER LOGIN:    
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
share this article :
post comment
 

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

Hi Thanks For Article. I am unable to upload Multiple Files at a time. What we need to do to achieve this.

Posted by surya praveen Mar 15, 2011

Hi annet Plz don't mind this code is working fine here. Please send me the error which you did get. You can also upload single or multiple image by this application. Thanks

Posted by Purushottam Rathore Feb 06, 2011

Hi, I have tried this code but it doesn't work for uploading more than one image. I need to upload one image at a time. Please help! Annet

Posted by annet Feb 04, 2011
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor
PREMIUM SPONSORS
  • ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications. Visit DynamicPDF here
    Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites - Click Here!
Become a Sponsor