Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
It is not possible to dynamically change how many rows (file input elements) an AJAXUploader has at client side. But it is possible to show/hide any row dynamically. The following code demonstrates an AJAXUploader control that shows only one row at the very begining, then when user selects a file, it "grows" and displays a second row, and so on.
Code: HTML/ASPX
<eo:AJAXUploader runat="server" ID="Uploader1"
Width="250px" Rows="5" TempFileLocation="~/eo_upload">
</eo:AJAXUploader>
Code: JavaScript
//Get the total number of rows
var uploaderRowCount = <%=Uploader1.Rows%>;
//Get the uploader's ClientID
var uploaderClientID = '<%=Uploader1.ClientID%>';
//Get the file input element for a given row
function get_file_input(row)
{
return document.getElementById(
uploaderClientID + "_f_" + row);
}
//This function is being called in a timer. It
//checks whether a row is empty. If it is not
//empty, then displays the row and the next row;
//Otherwise it hides the next row
function update_uploader()
{
var i;
var fileInput;
var visibleRows = new Array();
//The first row is always visible
visibleRows[0] = true;
//Figure out which row needs to be visible
for (var i = 0; i < uploaderRowCount; i++)
{
fileInput = get_file_input(i);
if (fileInput.value)
{
//This row and the next row needs to be
//visible if this row is not empty
visibleRows[i] = true;
visibleRows[i + 1] = true;
}
}
//Show/hide rows
for (i = 0; i < uploaderRowCount; i++)
{
//Start from the file input element
fileInput = get_file_input(i);
//Get the table row that contains this file input element
var row = fileInput;
while (row.tagName != "TR")
row = row.parentNode;
//Show or hide the row
row.style.display = visibleRows[i] ? "" : "none";
}
//Set up the timer again
setTimeout("update_uploader()", 10);
}
//Start the timer
setTimeout("update_uploader()", 10);
Hope this helps. Thanks
|