JavaScript实现 动态添加或减少文件上传控件

动态添加或减少文件上传控件 效果

代码

    
        
        动态添加文件上传列表
        
            function addFile(event) {
                //创建一个div标签，用以包含一个input标签和删除按钮
                var innerdiv = document.createElement("div");
    
                //创建一个input标签
                var inputNode = document.createElement("input");
                inputNode.name = "fileName";
                inputNode.type = "file";
    
                //创建一个删除按钮
                var delNode = document.createElement("input");
                delNode.name = "del";
                delNode.type = "button";
                delNode.value = "删除";
    
                //删除当前删除按钮所在的标签,为此按钮点击事件创建一个处理函数
                delNode.onclick = function d() {
                    this.parentNode.parentNode.removeChild(this.parentNode); //删除此div区域
                    var fileNodes = document.getElementsByName("fileName");
                };
    
                innerdiv.appendChild(inputNode);
                innerdiv.appendChild(delNode);
    
                var div = document.getElementById("file");
                div.appendChild(innerdiv);
            }
        
    
    
        
            上传文件: