网易邮箱的附件上传功能

来源：互联网发布：mac桌面壁纸高清编辑：程序博客网时间：2024/05/01 18:48

<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>