类似gmail添加附件

Question

/*删除已经添加的附件项*/
  function removeChild(parent,child,tip)
  {
                  
               var i=parent.getAttribute("count");
               if(isIE())
               {
                       var id=parseInt(child.getAttribute("id"));
                       parent.removeChild(child);
                       parent.removeChild(tip);
                       i--;
                                               /*
                       var tipAry=new Array();
                       var inputAry=new Array();
                       for(j=0;j<parent.childNodes.length;j++)
                       {
                               var node=parent.childNodes[j];
                               if(node.nodeType==1)
                               {
                                       if(node.getAttribute("idi"))
                                       {
                                               inputAry.push(node);
                                       }
                                       else if(node.getAttribute("idt"))
                                       {
                                               tipAry.push(node);
                                       }
                               }
                       }
                       for(j=0;j<tipAry.length;j++)
                       {
                               var position=getPosition(tipAry[j]);
                               inputAry[j].style.top=position.top+"px";
                               inputAry[j].style.left=position.left+"px";
                       }
                                               */
                                               var tipAry=rePlaceInput(parent);
                       if(i==0)
                       {
                              tipAry[i].innerHTML="添加一个附件";
                       }
               }
               else
               {
                       parent.removeChild(child);
                       i--;
                       if(i==0)
                       {
                               tip.innerHTML="添加一个附件";
                       }
               }
          
               parent.setAttribute("count",i);
                  
  }
  
  /* 添加移除项 */
  function getRemove(form,node,tip)
  {
               var text="移除";
               var span=document.createElement("span");
               span.style.cssText="font:10px Arial;color:#00f;text-decoration:underline;";
           span.innerHTML=text;
               span.onclick=function(){removeChild(form,node,tip);}
               return span;
  }
  
  /* firefox下的文件选择框 */
  function createFirefoxInput(form,inputIndex)
  {
               var i=inputIndex?inputIndex:0;
               var tip=i==0?getFirefoxTip(form):form.lastChild;
               if(i==0)
               {
                       form.appendChild(tip);
               }
               else
               {
                       var inputDiv=document.createElement("div");
                       var input=document.createElement("input");
                       input.setAttribute("type","file");
                       input.setAttribute("name","file_"+i);
                       input.onchange=function(){
                                  
                       }
                       inputDiv.appendChild(input);
                       inputDiv.appendChild(getRemove(form,inputDiv,tip));
                       form.insertBefore(inputDiv,tip);
                       form.setAttribute("count",i);
                       tip.innerHTML="再添加一个附件";
               }
                  
       }
  
  /* firefox下的初始化函数 */
  function initFirefox()
  {
               var form=document.forms['uploadForm'];
               createFirefoxInput(form);
  }
  
  /* 获取指定元素在页面的位置 */
       function getPosition(obj)
       {
               var top=0,left=0;
               while(obj.offsetParent)
               {
                       top+=obj.offsetTop;
                       left+=obj.offsetLeft;
                       obj=obj.offsetParent;
               }
               return {top:top,left:left};
       }
  
       /* IE下的附件添加提示 */
       function getIeTip(form)
  {
               var str=parseInt(form.getAttribute("count"))>=0?"再添加一个附件":"添加一个附件";
               var cssStr="font:12px Arial;color:#00f;text-decoration:underline";
               var tipDiv=document.createElement("div");
               tipDiv.style.cssText=cssStr;
               tipDiv.innerHTML=str;
               return tipDiv;
  }
          
       /*IE下的文件按选择显示*/
       function updateIeInput(input,tip)
       {
               var parent=input.parentNode;
               parent.style.zIndex=-2;
               tip.style.textDecoration="none";
               tip.style.color="#000000";
               tip.style.fontWeight="bold";
               tip.innerHTML=input.value;
               tip.appendChild(getRemove(input.form,parent,tip));
       }
  
       /*创建IE下的文件选择框*/
       function createIeInput(form,inputIndex)
  {
               var i=inputIndex?inputIndex:0;
               var tip=getIeTip(form);
               tip.setAttribute("idt",i)
               form.appendChild(tip);
               var inputDiv=document.createElement("div");
               var input=document.createElement("input");
               input.setAttribute("type","file");
               input.setAttribute("name","file_"+i);
               input.style.cssText="width:0";
               input.onchange=function(){
                               createIeInput(this.form,parseInt(this.form.getAttribute("count"))+1);
                               updateIeInput(this,tip);
                                                               rePlaceInput(this.form);
               }
               inputDiv.appendChild(input);
               inputDiv.setAttribute("idi",i);
               var position=getPosition(tip);
               inputDiv.style.cssText="position:absolute;top:"+position.top+"px;left:"+position.left+"px;filter:alpha(opacity=0);z-index:2";
               form.appendChild(inputDiv);
               form.setAttribute("count",i);
                  
       }
  
/* 重新置位*/
 function rePlaceInput(parent)
 {
        var tipAry=new Array();
    var inputAry=new Array();
    for(j=0;j<parent.childNodes.length;j++)
    {
       var node=parent.childNodes[j];
       if(node.nodeType==1)
       {
          if(node.getAttribute("idi"))
          {
               inputAry.push(node);
          }
          else if(node.getAttribute("idt"))
          {
               tipAry.push(node);
          }
        }
      }
      for(j=0;j<tipAry.length;j++)
      {
           var position=getPosition(tipAry[j]);
           inputAry[j].style.top=position.top+"px";
           inputAry[j].style.left=position.left+"px";
      }
        return tipAry;
 }
  
       /*初始化IE*/
  function initIE()
  {
               var form=document.forms["uploadForm"];
               createIeInput(form);
                               window.onresize=function(){
                                rePlaceInput(form);
                               }
  }
     
  /* 初始化 */
  function init()
  {
               if(isIE())
               {
                       initIE();
               }
               else
               {
                       initFirefox();
               }
  }
 </script>
</HEAD>
  
<BODY onload="init()">
<form name="uploadForm" action="/upload.do" target="upload" enctype="multipart/form-data" method="post">
</form>
<iframe name="upload" style="display:none"></iframe>
</BODY></HTML> 

Answer 1

先给你段仿126的<!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=gb2312" />
<title>测试附件</title>
<style type="text/css">
/*附件 开始*/
a.files, span.del_file {
overflow:hidden;
display:-moz-inline-box;
display:inline-block;
background:url(F2.gif);
}a.files {
width:50px;
height:15px;
#vertical-align:middle;
}
a.files:hover {
background-position:0 -24px;
}a.files input {
margin-left:-160px;
filter:alpha(opacity=0);
opacity:0;
}span.del_file {
width:7px;
height:7px;
background-position:0 -51px;
vertical-align:middle;
#vertical-align:sub;
margin-left:2px;
cursor:pointer;
}
/*附件 结束*/
</style>
<script type="text/javascript">
var File = {
/*
模拟126的附件添加特效
-------------------------------------------------------
**num
为元素的下标
**count
为元素的个数
**name
为元素的名字和ID的前段（元素的实际名称是前段加下标）
**status
为状态的ID
**form
为表单的ID
-------------------------------------------------------
*/
num : 1, count : 0

, name : 'file', status : 'file', form : 'form'

, urls : {}

, add : function (file) {
//添加附件
if (this.urls[file.value]) {
alert('此文件已存在');
return false;
}

var a = file.parentNode, status = document.getElementById(this.status);

this.urls[file.value] = 1;

document.getElementById(this.form).appendChild(file);

if (/Firefox/.test(window.navigator.userAgent)) {
//中转一下，否则FF里有很NB的错误会出现
var b = a, a = a.cloneNode(true);
b.parentNode.replaceChild(a, b);
b = null;
}

file.style.display = 'none';

a.innerHTML = '<input id="' + this.name + (this.num + 1) + '" name="' + this.name + (this.num + 1) + '" onchange="File.add(this)" type="file" \/>';

status.innerHTML += ' <span>' + (/[^\\]+$/.exec(file.value)||'') + '<span class="del_file" onclick="File.del(this, ' + this.num + ')"><\/span>;<\/span>'


this.count ++, this.num ++, a = file= null;
}

, del : function (span, num) {
//删除附件
var file = document.getElementById(this.name + num);
delete this.urls[file.value];

document.getElementById(this.form).removeChild(file);
span.parentNode.parentNode.removeChild(span.parentNode);
this.count --, span = num = null;
}

};
</script>
</head>
<body>
<a href="javascript:void(0);" class="files"><input id="file1" name="file1" onchange="File.add(this)" type="file" /></a>
<div id="file"></div>
<hr />
<form id="form" action="b.asp" method="post" enctype="multipart/form-data">
<input type="submit" value="提交" />
</form>
</body>
</html>

Answer 2

http://www.cntuw.com//attachment/week_0825/161_12090514_3c2aad3ea894112.gif
这个是那张图片的地址。。
就是F2.gif

Answer 3

well!
能控制文件数，文件类型，文件大小就最好了。
最好加上一个点文件时可以在新窗口直接打开文件预览一下。
这个我想用在管理后台添加产品图上。

Answer 4

最好加上一个点文件时可以在新窗口直接打开文件预览一下。 这个应该是无法实现的，因为只有IE可以实现阅览本地文件吧貌似- -文件大小和个数还有格式个数和格式可以设置从里面改下就好了
不过文件大小，也只可以从IE里做控制。