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

前一久偶然发现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.csdn.net/images/p_blog_csdn_net/tutuliu/293137/o_addfile.gif) no-repeat left top ;  overflow : hidden ; }
.fileHover {  width : 63px ;  height : 13px ;  background : url(https://p-blog.csdn.net/images/p_blog_csdn_net/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' οnclick="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.csdn.net/down4/20070731/31201914198.rar