像163邮箱一样的上传附件。。

最新推荐文章于 2025-07-28 11:50:30 发布

原创最新推荐文章于 2025-07-28 11:50:30 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #input #div #javascript #blog #html

css学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种模仿163邮箱附件上传功能的实现方式，通过透明效果处理input type=file按钮，使得用户点击图片即可选择文件上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前一久偶然发现163邮箱上传附件的方法很特别，模仿写了一个，呵呵。。

<!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>文件上传</title>
<style>
form{ margin:0; padding:0;}
.fileUpArea{ width:63px; height:13px; background:url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/tutuliu/293137/o_addfile.gif) no-repeat left top; overflow:hidden;}
.fileHover{ width:63px; height:13px; background:url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/tutuliu/293137/o_addfilehover.gif) no-repeat left top; overflow:hidden;}
#fileUpArea input{ width:1%;size:0%; position:absolute; margin-left:-16px; z-index:100;filter:alpha(opacity=0);-moz-opacity:0;cursor:point;}
* html #fileUpArea input{ margin-top:-5px; margin-left:-10px;}
*+html #fileUpArea input{ margin-top:-5px; margin-left:-10px;}
#filetxt{ font-size:12px; color:#555; padding:10px;}
#filetxt img{ cursor:point;}
</style>
<script language="javascript" type="text/javascript">
var inputCount=0;
function CreateFile()
{
    var container=document.getElementById("fileUpArea");
    container.onmouseover=function(event)
    {
        this.className="fileHover";
    }
    container.onmouseout=function(event)
    {
        this.className="fileUpArea";
    }
    var input=document.createElement("input");
    input.type="file";
    input.size="1";
    input.name="upfile"+inputCount;
    input.id="upfile"+inputCount;
    input.onchange=function(event)
    {
        if(CheckFileName(this.value))
        {
            this.style.display="none";
            CreateFile();
            var tempid=this.id+"text";
            var temptext=this.value+" <img src='Img/f2.gif' onclick="Del('"+tempid+"'),Del('"+this.id+"')" />";
            CreateText(tempid,temptext);
        }
    }
    container.appendChild(input);
    inputCount++;
}
function CheckFileName(txt)
{
    var container=document.getElementById("fileUpArea");
    var ch=container.getElementsByTagName("input");
    var rvalue=true;
    if(ch.length>=2)
    {
        for(i=0;i<ch.length-1;i++)
        {
            if(ch[i].value==txt)
            {
                alert("你已经添加了相同的附件!!!");
                rvalue= false;
                break;
            }
        }
    }
    return rvalue;
}
function CreateText(id,text)
{
    var contxt=document.createElement("div");
    contxt.id=id;
    contxt.innerHTML=text;
    document.getElementById("filetxt").appendChild(contxt);
}
function Del(id)
{
    document.getElementById(id).parentNode.removeChild(document.getElementById(id));
}
window.onload=CreateFile;
</script>
</head>
<body>
<form name="form1" method="post" enctype="multipart/form-data" action="upload.aspx">
<div id="fileUpArea" class="fileUpArea">
</div>
</form>
<div id="filetxt"></div>
</body>
</html>

其实是很简单的一段代码，不过是把input type=file的按钮使用了透明的效果，就好像是点击在图片上一样。。

呵呵,上次忘记放图片了. 这次加上.......

附上下载地址.呵呵..

http://dl2.youkuaiyun.com/down4/20070731/31201914198.rar