您的位置：首页 > 其它

网易邮箱的附件上传功能

2010-02-23 15:53 316 查看

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<style>
a.addfile
{
background-image:url( http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-915px -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration :underline;
top:0pt;
width:80px;
}
input.addfile
{

cursor:pointer !important;

height:18px;
left:-13px;
filter:alpha(opacity=0);
position:absolute;
top:5px;
width:1px;
z-index:-1;

}
</style>
<script language="javascript" type ="text/javascript" >
/*添加附件*/
var fileNumber = 0;
function createnew()
{
var c_a = document.getElementById('container1'); //找到上传控件的a容器
var c_div = document.getElementById('container2'); //放置文件的容器
var fileCtr = c_a.firstChild; //上传控件

var subDiv = document.createElement("div"); //将放置到c_div中的容器
var span1 = document.createElement("span"); //上传的文件
var filepath=fileCtr.value;
//alert(filepath);
var name=filepath.split("//");
var a=name.length;
var s=name[a-1];
//alert(s);

//span1.innerText = fileCtr.value;
span1.innerText=s;
var btnDele = document.createElement("button"); //删除按钮
btnDele.className = "addfile";
btnDele.value="删除";
btnDele.onclick=function()
{
this.parentNode.parentNode.removeChild(this.parentNode);
}

subDiv.appendChild(span1);
subDiv.appendChild(btnDele);
subDiv.appendChild(fileCtr);

c_div.appendChild(subDiv);

fileNumber++;
var newFileCtr = document.createElement("input");
newFileCtr.type = "file";
newFileCtr.className = "addfile";
newFileCtr.runat = "server";
newFileCtr.name = "file_"+fileNumber;
newFileCtr.onchange = createnew;

while(c_a.firstChild)
{
c_a.removeChild(c_a.firstChild);
}

c_a.appendChild(newFileCtr);
}

</script>
<body>
<form id="form1" runat="server">
<div>
<a id="container1" class="addfile" >
<input id="File1" name="file_0" type="file" class="addfile" onchange="createnew();" runat="server" />
</a>
</div>
<div id="container2" align="left" >

</div>
</form>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航