Multiple File Upload using JQuery in ASP.NET 3.5

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.