Reader Level:
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.
  • 3
  • 0
  • 44819
 

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.

COMMENT USING

Trending up