您的位置：首页 > 其它

使用DOM方法实现多附件上传客户端

2012-02-29 19:45 253 查看

有时候需要传多个附件，再次我用javascript的dom方式实现了次功能，很实用的。

功能呢就是用户可以添加多个附件，每次点击添加添加一个新的上传文本域，对于已经添加的上传文本域，用户可以点击“删除” 删除一个上传文本域

程序思路我就不在这废话了，下边给大家在程序中添上了很详细的伪代码。

<!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=utf-8" />

<title>使用DOM方法实现多附件上传客户端</title>

<script language="javascript" type="text/javascript">

function addFile(){

//创建tr标签

var tr1=document.createElement("tr");

//创建td标签

var td1=document.createElement("td");

//创建input标签

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

//给input加上type=file属性

input1.setAttribute("type","file");

//给input加上value=“浏览”属性

input1.setAttribute("value","浏览");

//将创建的第一个td追加到tr1

td1.appendChild(input1);

tr1.appendChild(td1);

//再次创建一个td

var td1=document.createElement("td");

//创建input标签

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

//给input加上type=“button” 和value=“删除”属性

input1.setAttribute("type","button");

input1.setAttribute("value","删除");

//给input添加上nclick事件，将this传过去，也就是标签对象input，到时候执行那个input就将那个input对象传过去

input1.setAttribute("onclick","delFile(this)");

//将input追加给td

td1.appendChild(input1);

//再讲td追加给tr1

tr1.appendChild(td1);

//最后将tr1追加给table

document.getElementById("id2").appendChild(tr1);

}

function delFile(this1){

//this1接受onclik事件传过来的值，也就是被执行的那个input对象

//我们要删除的是tr标签，所以经过input标签找到input的父标记td

//再经过td找到td的父标记tr，在找到tr的父标记table，根据关系就是input的大爷table~

var p=this1.parentNode;

var p2=p.parentNode;

var p3=p2.parentNode;

//删除执行删除标签所属的tr标签，保存删除标签的结果

var element=p3.removeChild(p2);

}

</script>

</head>

<body>

<div id="id1">

<table id="id2">

<tr>

<td><input type="file" value="浏览"></td>

<td><input type="button" value="添加" onclick="addFile()"></td>

</tr>

</table>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航