meizz等高手请进-----gmail 上传文件怎么实现的？

以前的帖子中遇到过这个问题，是会清空掉的，我也测试过，当时以为不能实现，那个帖子就沉下去了。如果GOOGLE可以实现的话，兄弟们再研究研究，顶下，学习中

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

楼上的，说清楚一下，怎么嵌套一个IFRAME？
现在GMAIL是增加一个 file控件了，而 163的是用一个超连接来上传文件的，具体的代码还在分析
file控件?
==========================
我昨天还测试了，没有提示要下载什么控件阿。
而 163的是用一个超连接来上传文件的
===================================
用超链接实现和按钮实现有区别吗？
没，我说的file控件是指 gmail它动态添加 <input type="file">的
用超链接就是表示没有直接用file控件啊，自然就可以控制file了
是啊，他肯定是用 <input type="file">实现上传的。只是不清楚他是怎么做到隐藏这些控件的。
看了163的代码
他主要是用
a.addfile {
background-image:url(f1.gif);
background-repeat:no-repeat;background-position:-823px -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:70px;
}
input.addfile {
/*left:-18px;*/
}
input.addfile {
cursor:pointer !important;
height:18px;
left:-3px;
opacity:0;
position:absolute;
top:5px;
width:1px;
}
</style>
<body>
<a id="aComposeAttach" class="addfile" href="#">
<input class="addfile" type="file" name="file3" size="1" style="z-index: -1;"/>
<input class="addfile" type="file" name="file4" size="1"/>
</a>
看到的添加附件这几个字只是图片而已，http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif 我上面的代码是已经上传了一个文件的代码如果一个都没有上传，那么就是
<a id="aComposeAttach" class="addfile" href="#">
<input class="addfile" type="file" name="file3" size="1" style="z-index: -1;"/>
</a>
其实就是 <input class="addfile" type="file" name="file4" size="1"/>  的值为你上传的文件，估计是他又重新插入一个<input class="addfile" type="file" name="file3" size="1" style="z-index: -1;"/> 盖在上面诱导点击
<style>
a.addfile {
background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-823px -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:70px;
}input.addfile {
/*left:-18px;*/
}input.addfile {
cursor:pointer !important;
height:18px;
left:-3px;
opacity:0;
position:absolute;
top:5px;
width:1px;
}
</style>
<body><a id="aComposeAttach" class="addfile" href="#">
<input class="addfile" type="file" name="file3" size="1" style="z-index: -1;"/>
</a>这样的话，看不到那个图片阿，只能看到一个浏览
又看了下，发现用的还是老办法，用filter:alpha(opacity=0); 或者 opacity=0 隐藏了浏览这几个字，然后在onclick事件中添加<input type="file">
我靠，太帅了。不过还有一个问题啊：
filter:alpha(opacity=0); 在ff中不支持的吧，怎么处理。
div.style.opacity = "0.8";
div.style.filter = "alpha(opacity:80)";
对于file控件
div.style.opacity = "0.8";无效
但是
div.style.opacity = "0";有效
我写了程序,总结了gmail的2个特色问题
http://www.yuhuatel.com/yang/htmlver2/news/detail.asp?id=1449,可以看看
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
a.addfile {
   display:block;
   position:relative;
   text-decoration:none;
   width:70px;
}input.addfile {
   cursor:pointer !important;
   left:-5px;
   top:0px;
   position:absolute;
   width:1px;
}
</style>
<script>
function CheckForm()
{
   var el=document.form1.children;
   for(var i=0; i<el.length;i++)
   {
      if(el[i].tagName.toLowerCase()=="input" && el[i].type.toLowerCase()=="file")
         alert(el[i].value);
   }
}function AddAttach(link_id, id, form_name, attach_div)
{
   if(!link_id)
      link_id="addAttach";
   if(!form_name)
      form_name="form1";
   if(!attach_div)
      attach_div="attach_div";

   var attach_area = document.getElementById(attach_div);
   var form_el = document.all(form_name);
   var addAttach = document.getElementById(link_id);
   if(!attach_area || !form_el || !addAttach)
   {
      alert("参数无效");
      return;
   }

   var attach = document.getElementById("file_"+id);
   var attach_name = attach.value;
   var el=document.form1.children;
   for(var i=0; i<el.length;i++)
   {
      if(el[i].tagName.toLowerCase()=="input" && el[i].type.toLowerCase()=="file" && el[i].id!=attach.id && el[i].value==attach_name)
      {
         alert("该文件已经添加");
         return;
      }
   }

   attach_name = attach_name.substring(attach_name.lastIndexOf("\\")+1, attach_name.length);
   attach_area.innerHTML+="<span id='file_name_"+id+"'><img src='/images/attach.png' align='absMiddle'>"+attach_name+"<img src='/images/remove.png' onclick='RemoveAttach("+id+")' align='absMiddle' style='cursor:hand;'>; </span>";
   attach.style.zIndex = "-1";
   form_el.appendChild(attach);

   id++;
   var attach = document.createElement('<input class="addfile" type="file" name="file_'+id+'" id="file_'+id+'" size="1" style="filter:alpha(opacity=0);" onchange="AddAttach(\''+link_id+'\','+id+',\''+form_name+'\',\''+attach_div+'\');" />');
   addAttach.appendChild(attach);
}function RemoveAttach(id)
{
   var attachment = document.getElementById("file_"+id);
   if(attachment && attachment.parentElement)
      attachment.parentElement.removeChild(attachment);

   var attach_name = document.getElementById("file_name_"+id);
   if(attach_name && attach_name.parentElement)
      attach_name.parentElement.removeChild(attach_name);
}
</script>
<body>
<br><form enctype="multipart/form-data" name="form1" method="post" action="file.php">
  <a id="addAttach" class="addfile" href="javascript:;">上传附件
    <input class="addfile" type="file" name="file_0" id="file_0" size="1" style="filter:alpha(opacity=0);" onchange="AddAttach('addAttach', 0,'form1','attach_div');" />
  </a>
  <div id="attach_div"></div>
  <br>
  <input type="button" name="button" value="提交" onclick="CheckForm();">
</form>
</body>
</html>
163网盘那里的上传确实使用图片上面加盖透明度为0 的<input type=file/>来实现的
但是发邮件那里的附件上传并不是用图片而是真正的连接，而且IE和FF都可以使用，分析源代码没看出什么东西来，期盼高手