静坐常思己过,闲谈莫论人非,能受苦乃为志士,肯吃亏不是痴人,敬君子方显有德,怕小人不算无能,退一步天高地阔,让三分心平气和,欲进步需思退步,若着手先虑放手,如得意不宜重往,凡做事应有余步。持黄金为珍贵,知安乐方值千金,事临头三思为妙,怒上心忍让最高。切勿贪意外之财,知足者人心常乐。若能以此去处事,一生安乐任逍遥。

类似Gmail添加附件的效果

作者:大鹏 发布于:2008-11-13 23:34 Thursday 分类:JavaScript与HTML

利用Ajax技术无刷新添加附件,类似于Gmail的添加附件功能。从网上找到的,有空再仔细研究一下。

[codes]
<!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>
[/codes]


标签: javascript ajax google gmail

et_highlighter
发表评论 »本文目前尚无任何评论

发表评论

干净网络从你做起,切勿黏贴小广告