【文章标题】动态增加附件上传文件框的实现
【文章作者】曾健生
【作者邮箱】zengjiansheng1@126.com
【作者QQ】190678908
【作者博客】http://blog.csdn.net/newjueqi
【编程环境】Dreamweaver
【作者声明】欢迎转载文章，但转载请保留文章的完整性以及注明文章的出处。
*******************************************************************************
动态增加附件上传文件框的数量在Web中是个很常见的功能，最原始的状态如图1：
图1
当按两下“添加附件”后，增加了两个文件选择控件，如图2所表示：
图2
看起来很神奇，其实这是通过动态增加表格行的方法实现的，我们把表格的框线显示出来，如图3所示:
图3
我们知道，DOM中表格中的每个元素都可看成一个对象，单元格是一个对象，行也是一个对象。
在这个实现中，文件选择框和删除标签都是一个独立的对象，各放在一个单元格中，而两个单元格组成表格的一行，这样最大的好处就是容易实现格式化控制，使界面美观整齐。
在这个表格中，有如下层次关系：
Table
|--Tbody
|--tr(第一行)
|--td：
|--添加附件标签
|--tr（除第一行外的各行）
|--td：
|--文件选择框
|--td：
|--删除标签
动态增加表格行的方法实现：
当按下添加附件标签，就是动态创建表格的一行（通过insertRow），通过insertCell的形式在行对象中插入单元格对象，这一行有两个单元格，其中一个单元格有一个文件选择框对象，另一个单元格有个删除标签。通过单元格对象的innerHTML属性在单元格内部添加HTML文本，创建文件选择框对象；通过document类的createElement（）创建超链接对象，在单元格对象中用appendChild（）添加超链接对象。
删除附件的实现：
删除附件其实就是删除超链接表格上的所在的行，从上述的层次结构可看出以下内容：
超链接对象.parentNode.parentNode=行对象
表格对象.childNodes[0]=tbody对象
而行对象是tbody对象的一个子节点。
所以当点击“删除附件”超链接删除附件，就是通过超链接对象获取所在的行对象，另外通过“表格对象”.childNodes[0]获取tbody对象，然后在tbody对象中删除行对象，就能实现删除附件的效果。
实现的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script>
function addfujian()
{
//获取表格对象
var tabObj = document.getElementsByTagName("table")[0];
//在表格中添加一行
var trObj = tabObj.insertRow();
//在行对象中添加第一个单元格
var tdObj_1 = trObj.insertCell();
//在行对象中添加第二个单元格
var tdObj_2 = trObj.insertCell();
//在第一个单元格中添加一个文件浏览控件
tdObj_1.innerHTML = "<input type='file' name='filepath' />";
//创建一个超链接对象
var aObj = document.createElement("a");
//把超链接对象加入到第二个单元格中
tdObj_2.appendChild(aObj);
//设置超链接的标题
aObj.innerText="删除附件";
//使超链接的链接效果失效
aObj.href="javascript:void(0)";
//设置超链接点击事件处理函数
aObj.onclick = function()
{
//根据超链接对象获取行对象
var trObj = this.parentNode.parentNode;
//获取表格对象
var tabObj = document.getElementsByTagName("table")[0];
//在Tbody对象中移除行对象
tabObj.childNodes[0].removeChild(trObj);
}
}
</script>
<table>
<tr>
<td><a href="javascript:void(0)" οnclick="addfujian()">添加附件</a></td>
</tr>
</table>
</body>
</html>
添加附件的效果如图4：
图4
删除第三个附件后的效果如图5
图5
文章附件下载：http://newjueqi.ys168.com/
