代码改变世界

仿gmail的附件上传效果

2009-12-14 17:03  iBlog  阅读(399)  评论(0)  编辑  收藏  举报
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<script type="text/javascript"> 
/************************ 
* author lijun 
* date 2007.5.25 
* 
* 无刷新上传 
* IE,Firefox下和Gmail类似的附件添加方式 
* 允许进一步扩展，实现附件添加后即自动上传得功能。 
* 2007.5.30修正了一个bug. 
************************/ 
  
/* 检测浏览器类型 */ 
  function isIE() 
  { 
              if(document.attachEvent) 
              { 
                      return true; 
              } 
              else 
              { 
                      return false; 
              } 
  } 
  
/*firefox下的附件添加提示*/ 
  function getFirefoxTip(form) 
  { 
              var str="添加一个附件"; 
              var cssStr="width:100px;font:12px Arial;color:#00f;text-decoration:underline"; 
              var tipDiv=document.createElement("div"); 
              tipDiv.style.cssText=cssStr; 
              tipDiv.innerHTML=str; 
              tipDiv.onclick=function() 
              { 
                      var i=form.getAttribute("count")?form.getAttribute("count"):0; 
                      createFirefoxInput(form,parseInt(i)+1); 
              }; 
              return tipDiv; 
  } 
  
/*删除已经添加的附件项*/ 
  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>