日期:2014-05-18  浏览次数:20564 次

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

------解决方案--------------------
JScript code
//添加附件控件
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";
            }
        }
    }
}