在web端怎么动态的添加控件

Question

我想实现这样以个功能（类似于相册的上传功能）：当点击“上传更多”按钮时，就添加以个FileUpload控件，没有限制数量，在FileUpload控件旁边有对应的取消按钮，当点击取消时就把相应的控件删除掉，实现能在web端动态添加和删除控件的功能！~

Answer 1

//添加附件控件
function addFile(addNew)
{
    var trAtt = document.getElementById("trAtt");
    trAtt.style.display = "";
    if(addNew)
    {
        var tdAttachment = document.getElementById("attachmentId");
        if(tdAttachment)
        {
        var oDiv = document.createElement('div');
        tdAttachment.appendChild(oDiv);
        var oFile = document.createElement('<input type="file" size="50" name="File" runat="server" >');
        oDiv.appendChild(oFile);
        var oButton = document.createElement('<button onclick="removeme()">');
        oButton.innerHTML = '删除';
        oDiv.appendChild(oButton);//         document.getElementById("appendLink").alt = '继续添加附件';
    }
}
}//删除附件控件
function removeme()
{
var oDiv = event.srcElement.parentElement; if(oDiv.tagName=='DIV')
{
oDiv.removeNode(true);
}

    var tdAttachment = document.getElementById("attachmentId");
    window.status = tdAttachment.innerHTML;
    if(tdAttachment.innerHTML.length<10)
{
//        document.getElementById("appendLink").alt = '添加附件';
        var trAtt = document.getElementById("trAtt");
        trAtt.style.display = "none";
    }
}//删除已有附件
function removeAttachment()
{
if(confirm("你确定要删除该附件吗?"))
{
    var ele = event.srcElement;     if(ele.attID)
    {
        //删除隐藏控件中的附件id
        var hfFile=document.getElementById('hfAppur');         if(hfFile)
        {
            if(hfFile.value.indexOf(ele.attID) >= 0)
            {
                hfFile.value = hfFile.value.replace(ele.attID,"");
            }
        }     var trTmp = ele.parentElement;
    if(trTmp)
        trTmp.removeNode(true);
        
        var tdAttachment = document.getElementById("attachmentId");
            if(tdAttachment.innerHTML.length<10)
    {
//     document.getElementById("appendLink").innerHTML = '添加附件';
            var trAtt = document.getElementById("trAtt");
                trAtt.style.display = "none";
        }
    }
}
}

Answer 2

 <table align="center" cellPadding="4" cellSpacing="0" width="99%" class="dtTABLE" id="tableUpFile">
  <tr style="height:30px"><td width="96" align="right" nowrap>标 题</td><td colspan="3">
    <asp:TextBox ID="txtTitle"  runat="server" Width="300px"></asp:TextBox>*&nbsp;<span ID="lblInfo"  class="lblInfo" style="display:none;color:Red;">标题不能为空，且不能输入'<'、'>'等字符！</span></td>
</tr>
  <tr>
    <td nowrap>发布范围</td>
    <td nowrap colspan="3"> 
<input type="text" id="txtReceiver" value="" style=" width:300px;" readonly runat="server" onclick="ShowUserTree(false)" />&nbsp;
<img id="btnShowUserTree" onclick="ShowUserTree(false)" alt="选择收件人" src="../../images/addpeople.gif" onmouseover=""/>
&nbsp;&nbsp;<img src="../../images/delete.gif" alt="清空收件人" onclick="ClearUserList()"/>
<input type="checkbox" runat="server" ID="ckbAll" onclick="SelectAll()"/>全体员工
<asp:HiddenField ID="HiddenUserList" runat="server" />
  </td>
</tr>      <tr>
<td nowrap>发布日期</td><td nowrap colspan="3">
<input id="txtTime" type="text" onClick="WdatePicker()"  runat="server" class="Wdate" onfocus="WdatePicker({skin:'whyGreen',minDate:'2005-03-08',maxDate:'%y-%M-%d'})"/></td>
</tr>
<tr >
        <td colspan="4" style="height: 25px">
        <img id="appendLink" runat="server" src="../../images/addfiles.gif" alt="(单个文档大小不超过10MB)" onclick="addFile(true);"/>
        </td>
</tr>
<tr id="trAtt" style=" display:none;">
        <td></td>
      <td id="attachmentId" colspan=3  runat="server" nowrap></td>
</tr>
  <tr>
    <td colspan="4"><weith:FCKeditor ID="txtContent" runat="server" BasePath="~/FCKeditor/" Height="300px" Width="100%"></weith:FCKeditor></td>
    </tr>
<tr>
<td colspan="4" align="left"><input id="ckxShowOtherInfo" type="checkbox" onclick="ShowOtherInfo()" />其他信息</td>
</tr>
</table>
<table align="center" cellPadding="4" cellSpacing="0" width="98%" style="display:none;" class="dtTABLE" id="tableOtherInfo">
<tr><td width="96" nowrap>
    简报分类</td><td nowrap colspan="3">
    <asp:DropDownList ID="ddlClassifyID" runat="server"></asp:DropDownList> &nbsp;&nbsp;<a href="CodeDicManage.aspx">修改分类</a></td>
</tr>
<tr>
    <td width="96" nowrap>文 号</td><td colspan=3>
 <asp:TextBox ID="txtDocNum" runat="server" Width="300px"></asp:TextBox></td>
 </tr>
 <tr>
    <td width="96" nowrap>主 题</td><td colspan=3>
 <asp:TextBox ID="txtTheme" runat="server"  Width="300px"></asp:TextBox></td>
 </tr>
<tr>
    <td width="96" nowrap>发布人</td><td colspan=3>
 <asp:TextBox ID="txtAuthor" runat="server" Enabled="False" Width="300px"></asp:TextBox></td>
 </tr>
 <tr><td width="96" nowrap>摘 要</td><td colspan=3>
    <asp:TextBox ID="txtAbstract"  runat="server" Width="500px" TextMode="MultiLine"></asp:TextBox></td>
</tr>
 </table>后台
HttpFileCollection fileList = HttpContext.Current.Request.Files;
            for (int i = 0; i < fileList.Count; i++)
            {
                HttpPostedFile file = fileList[i];
                string fileN = file.FileName.Substring(file.FileName.LastIndexOf("\\") + 1);
                string fileName = RootPath + "\\" + fileN;                if (file.ContentLength > 0)
                {
                    fileName = CheckFileName(fileName);
                    file.SaveAs(fileName);
                }
            }