Jsp中动态的生成和删除上传文件输入项
一 思路分析
动态的增加和删除用到的是js脚本，通过document对象增加属性节点。删除时要同时删除输入项和删除按钮，所以要把增加的输入项和删除按钮放到一个div框中，通过获取div中的id来remove，把整个div框中的都删除。
二 代码分析
1．页面呈现 --- 用表格的形式呈现
<body>
<form action="${pageContext.request.contextPath }/servlet/uploadServlet3" enctype="multipart/form-data" method="post" >
<table border="1px" width="40%">
<tr>
<td>上传用户：</td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="添加文件" οnclick="addfile()"/></td>
</tr>
<%-- 动态添加的输入项 --%>
<tr>
<td></td>
<td><div id="files"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="上传文件"/></td>
</tr>
</table>
</form>
</body>
2．Js脚本
<script type="text/javascript">
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.οnclick=function del(){
this.parentNode.parentNode.removeChild(this.parentNode);
};
//动态生成div
var div = document.createElement("div");
div.appendChild(input);
div.appendChild(delButton);
files.appendChild(div);
}
</script>
扫一扫
554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
