动态增加附件上传文件框的实现

【文章标题】动态增加附件上传文件框的实现

【文章作者】曾健生

【作者邮箱】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">

<head>

<title>无标题文档</title>

</head>

<body>

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>

</tr>

</table>

</body>

</html>

添加附件的效果如图4：

动态增加附件上传文件框的实现

图4

删除第三个附件后的效果如图5

动态增加附件上传文件框的实现

图5

文章附件下载：http://newjueqi.ys168.com/

秒客网

动态增加附件上传文件框的实现

相关文章