Jsp中动态的生成和删除上传文件输入项

来源：互联网发布：上海仙知机器人编辑：程序博客网时间：2024/05/16 12:13

Jsp中动态的生成和删除上传文件输入项

一思路分析

动态的增加和删除用到的是js脚本，通过document对象增加属性节点。删除时要同时删除输入项和删除按钮，所以要把增加的输入项和删除按钮放到一个div框中，通过获取div中的id来remove，把整个div框中的都删除。

二代码分析

1．页面呈现 --- 用表格的形式呈现

<body>

<tr>

</tr>

<tr>

</tr>

<%-- 动态添加的输入项 --%>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

2．Js脚本

function addfile(){

//获取id

var files = document.getElementById("files");

//创建元素标签

var input = document.createElement("input");

input.name="file";

input.type="file";

//动态生成删除按钮

var delButton = document.createElement("input");

delButton.type="button";

delButton.value="删除";

//删除按钮

delButton.onclick=function del(){

this.parentNode.parentNode.removeChild(this.parentNode);

};

//动态生成div

var div = document.createElement("div");

div.appendChild(input);

div.appendChild(delButton);

files.appendChild(div);

}

</script>