Reader Level:
Articles

Multiple File Upload using JQuery in ASP.NET 3.5

By Purushottam Rathore on December 21, 2010
Through this article you will learn how to upload multiple file using JQuery in ASP.NET 3.5.
  • 3
  • 0
  • 48773
 

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.

Purushottam Rathore

I am working as a Software Developer and has 6 years of experience on Microsoft Technology and having a Master Degree in Computer Application. I really like to work in the .NET platform. and working with ASP.NET 2.0/3.5/... Read more

COMMENT USING

Trending up