<%@ Page Language="vb" AutoEventWireup="false" Codebehind="DinamicalyAddInputItem.aspx.vb" Inherits="EAUploadExamples.DinamicalyAddInputItem"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Dinamicaly adding an INPUT element to the form.</title>
<link rel="stylesheet" href="ExamplesStyle.css">
<script type="text/javascript">
var NextFileIndex = 3;
var CheckedBoxCollection = new Array;
// Adds a checkbox element an assiciated with it the file element.
function AddInputItem(ContainerID)
{
var Container = document.getElementById(ContainerID);
var fileRow = document.createElement("span");
fileRow.setAttribute("id", "Row_" + NextFileIndex);
var htmlCode = "";
htmlCode += '<input type="checkbox" name="CheckBox_' + NextFileIndex + '" onclick="RefCheckedBoxCollection(this)">\n\r';
htmlCode += '<input type="file" name="File_' + NextFileIndex + '" size="40"><br>';
fileRow.innerHTML = htmlCode;
Container.appendChild(fileRow);
NextFileIndex++;
}
// Removes a required checkbox field and file field.
function RemoveInputItem(ContainerID)
{
var Container = document.getElementById(ContainerID);
var i = 0;
while (i < CheckedBoxCollection.length)
{
if ((CheckedBoxCollection[i]).checked)
{
Container.removeChild((CheckedBoxCollection[i]).parentNode);
CheckedBoxCollection.splice(i, 1);
}
else
{
i++;
}
}
NormalizeEnumeration();
}
// Updates a numeration of <INPUT> elements after removing element from the page.
function NormalizeEnumeration()
{
var filesCount = 1;
var inputItemCollection = document.getElementsByTagName("input");
for (var i = 0; i < inputItemCollection.length; i++)
{
var inputItem = inputItemCollection[i];
if (inputItem.type == "checkbox")
{
inputItem.parentNode.setAttribute("id", "Raw_" + filesCount);
inputItem.name = "CheckBox_" + filesCount;
}
else if (inputItem.type == "file")
{
inputItem.name = "File_" + filesCount;
filesCount++;
}
}
NextFileIndex = filesCount + 1;
}
// Handles click event of the checkbox and refreshes the collection of checked elements.
function RefCheckedBoxCollection(CheckBox)
{
if (CheckBox.checked)
{
CheckedBoxCollection.push(CheckBox);
}
else
{
for (var i = 0; i < CheckedBoxCollection.length; i++)
{
if (CheckedBoxCollection[i] = CheckBox)
{
CheckedBoxCollection.splice(i, 1);
break;
}
}
}
}
</script>
</HEAD>
<body>
This example demonstrates how to upload multiple files to a web server by
dynamically adding <b>INPUT</b> elements.
<br>
<br>
All uploaded files will be stored to the "UploadedFiles" folder that is located
in the root directory of an examples.<br>
You should grant write access to "UploadedFiles" folder to the ASP.NET process
identity(typically {MACHINE}\ASPNET on IIS 5<BR>
or Network Service on IIS 6).
<br>
<br>
Button "Add": Adds a new checkbox element and new file element.<br>
Button "Delete": Removes checked elements.<br>
Button "Upload": Sends files to a web server regardless of which checkbox
elements are checked.
<br>
<br>
<form id="Form1" method="post" runat="server" enctype="multipart/form-data">
<input onclick="AddInputItem('container')" type="button" value="Add" name="Add"> <input onclick="RemoveInputItem('container')" type="button" value="Delete" name="Delete">
<input type="submit" value="Upload" name="Upload">
<br>
<br>
<div id="container">
<span id="Row_1"><input onclick="RefCheckedBoxCollection(this)" type="checkbox" name="CheckBox_1">
<input type="file" name="File_1" size="40"><br>
</span><span id="Row_2"><input onclick="RefCheckedBoxCollection(this)" type="checkbox" name="CheckBox_2">
<input type="file" name="File_2" size="40"><br>
</span>
</div>
<br>
<br>
<asp:Label id="lblResponse" runat="server"></asp:Label>
</form>
<hr>
<a href="default.aspx" title="All examples">Other examples</a>
<p>
Used files: Bin\EasyAlgo.EAUpload.dll, web.config, DinamicalyAddInputItem.aspx,
DinamicalyAddInputItem.aspx.vb, JSCore.js, ExamplesStyle.css [Optional]
</p>
</body>
</HTML>