PART I

In ASP.NET 2.0, the FileUpload control enables the users to upload files from web pages. The FileUpload control consists of a text box and a browse button. A click on the button allows the users to select a file on the client and upload it to the server. Here, I am representing a functionality to provide a right to the user to upload any number of images.

Let us start with uploading multiple files on a single button click.

Follow these 2 steps:

Here is the aspx code:

<%@ 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>Make Multiple Upload Images</title>

<script type="text/javascript" language="javascript">

function DecreaseRow(rowNo)

{

var hid = document.getElementById('<%= hidCurRow.ClientID %>');

hid.value = rowNo;

}

function IncreseRows()

{

var hid = document.getElementById('<%= hidCurRow.ClientID %>');

hid.value = "";

}

function SetZero()

{

var hid = document.getElementById('<%= hidCurRow.ClientID %>');

hid.value = "0";

}

</script>

</head>

<body>

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

<table cellpadding="0" cellspacing="0" width="80%" align="center">

<tr>

<td>

<asp:Table ID="tblMin" runat="server">

<asp:TableHeaderRow>

<asp:TableHeaderCell>

File

</asp:TableHeaderCell>

<asp:TableHeaderCell>

Remove

</asp:TableHeaderCell>

</asp:TableHeaderRow>

<asp:TableRow>

<asp:TableCell>

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

</asp:TableCell>

<asp:TableHeaderCell>

<asp:Button ID="btn1" runat="server" Text="Remove" OnClientClick="return DecreaseRow('1');" />

</asp:TableHeaderCell>

</asp:TableRow>

</asp:Table>

<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click" Text="Add" OnClientClick="return IncreseRows();" />

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"

OnClientClick="SetZero();" /><br />

<asp:HiddenField ID="hidMax" runat="server" Value="1" />

<asp:HiddenField ID="hidRow" runat="server" Value="1" />

<asp:HiddenField ID="hidCurRow" runat="server" />

</td>

</tr>

</table>

</form>

</body>

</html>

This is the cs code:


using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.IO;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (Page.IsPostBack == true)

{

AddRows();

}

}

private void AddRows()

{

try

{

if (hidCurRow.Value != "" && hidCurRow.Value != "0")

{

DecreaseCount();

}

else if (hidCurRow.Value == "")

{

IncreaseCount();

}

for (int count = 1; count < tblMin.Rows.Count; count++)

{

tblMin.Rows.RemoveAt(1);

}

int maxRows = Convert.ToInt32(hidMax.Value);

string[] arrRows = hidRow.Value.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);

for (int count = 1; count <= maxRows; count++)

{

Boolean isAdd = false;

for (int incount = 0; incount < arrRows.Length; incount++)

{

if (arrRows[incount] == count.ToString())

{

isAdd = true;

break;

}

}

if (isAdd == true)

{

TableRow tr = new TableRow();

TableCell tcfu = new TableCell();

FileUpload fup = new FileUpload();

fup.ID = "fu" + count.ToString();

tcfu.Controls.Add(fup);

TableCell tcbtn = new TableCell();

Button bt = new Button();

bt.ID = "btn" + count.ToString();

bt.Text = "Remove";

bt.Attributes.Add("onclick", "DecreaseRow('" + count.ToString() + "');");

tcbtn.Controls.Add(bt);

tr.Cells.Add(tcfu);

tr.Cells.Add(tcbtn);

tblMin.Rows.Add(tr);

}

}

}

catch

{

}

}

private void IncreaseCount()

{

string strVal = hidMax.Value;

if (strVal != "")

{

int iMax = Convert.ToInt32(strVal);

iMax = iMax + 1;

hidMax.Value = iMax.ToString();

if (hidRow.Value != "")

{

hidRow.Value = hidRow.Value + "," + iMax.ToString();

}

else

{

hidRow.Value = iMax.ToString();

}

}

}

private void DecreaseCount()

{

string strCurRow = hidCurRow.Value;

string[] arrRows = hidRow.Value.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);

hidRow.Value = "";

for (int count = 0; count < arrRows.Length; count++)

{

if (arrRows[count] != strCurRow)

{

if (hidRow.Value == "")

{

hidRow.Value = arrRows[count];

}

else

{

hidRow.Value = hidRow.Value + "," + arrRows[count];

}

}

}

}

protected void btnAdd_Click(object sender, EventArgs e)

{

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

if (hidRow.Value != "")

{

string[] strVal = hidRow.Value.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);

for (int count = 0; count < strVal.Length; count++)

{

FileUpload fup = new FileUpload();

fup = (FileUpload)tblMin.FindControl("fu" + strVal[count]);

if (fup != null)

{

if (fup.PostedFile != null && fup.FileName != "")

{

fup.SaveAs(Server.MapPath("MyFiles") + "\\" + Path.GetFileName(fup.FileName));

}

}

}

}

}

}

When, we run the Apllication, result will be:

Upload1.JPG

Image 1.

Here, user can add many upload controls by clicking on Add button and even he can remove the upload controls by clicking on Remove button.

Upload2.JPG

Image 2.