日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

javascript實現(xiàn)動態(tài)多附件上傳方法

 WindySky 2008-12-15
方式一:事先寫好多個input.在點擊時才顯示。也就是說上傳的最大個數(shù)是寫死了的。
html
<p>
<a href='#'> 添加附件 </a>
<div id='more1' style='display:none'>
  <input type="file" name="attach1" size="50"javascript:viewnone(more2)>
  </span>
</div>
<div id='more2' style='display:none'>
  <input type="file" name="attach2" size="50"'>
</div>
</p>js <SCRIPT language="javascript">
function viewnone(e){
  e.style.display=(e.style.display=="none")?"":"none";
}
</script>
方式二:這種方式的動態(tài)多文件上傳是實現(xiàn)了的,很簡單的,不說廢話看code
html
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="刪除附件" onclick="deleteInput()">
<span id="upload"></span>js
<script type="text/javascript">
    var attachname = "attach";
    var i=1;
      function   addInput(){
        if(i>0){
            var attach = attachname + i ;
            if(createInput(attach))
              i=i+1;
        }
       
      }
      function deleteInput(){
            if(i>1){
            i=i-1;
            if(!removeInput())
                i=i+1;
          }
      }
     
      function createInput(nm){  
        var aElement=document.createElement("input");  
        aElement.name=nm;
        aElement.id=nm;
        aElement.type="file";
        aElement.size="50";
        //aElement.value="thanks";  
        //aElement.onclick=Function("asdf()");
          if(document.getElementById("upload").appendChild(aElement) == null)
              return false;
          return true;
      }
      function removeInput(nm){
          var aElement = document.getElementById("upload");
          if(aElement.removeChild(aElement.lastChild) == null)
            return false;
          return true;  
      }
     
</script>
方式三:動態(tài)多文件上傳,只是在oFileInput.click();這個地方,這樣做就不能上傳這個文件了,因為發(fā)現(xiàn)它在上傳之時就把這個input中的文件置空了。很可能是為了安全著想吧!
另外還有一點就是說,click()只有在ie中才能正常運行。
雖說這種方式最終沒能實現(xiàn)上傳,但還是留下來參考,看看是否有人可以真正實現(xiàn)上傳。
html
<A href="javascript:newUpload();">添加附件</A>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
  <TBODY id="fileList"></TBODY>
</TABLE>
<DIV id="uploadFiles" style="display:block"></DIV>js
<SCRIPT language="javascript">
  //---新建上傳
  function newUpload(){
    var oFileList = document.getElementById("fileList");
    var fileCount = oFileList.childNodes.length + 1;
    var oFileInput = newFileInput("upfile_" + fileCount);
    if(selectFile(oFileInput)){
        addFile(oFileInput);
    }
  }
 
  //----選擇文件
  function selectFile(oFileInput){
    var oUploadFiles = document.getElementById("uploadFiles");
    oUploadFiles.appendChild(oFileInput);
    oFileInput.focus();
    oFileInput.click();//不能這樣做,可能是為了安全著想吧!
    var fileValue = oFileInput.value;
    if(fileValue == ""){
        oUploadFiles.removeChild(oFileInput);
        return false;
    }
    else
      return true;
   
  }
 
  //---新建一個文件顯示列表
  function addFile(oFileInput){
    var oFileList = document.getElementById("fileList");
    var fileIndex = oFileList.childNodes.length + 1;
    var oTR = document.createElement("TR");
    var oTD1 = document.createElement("TD");
    var oTD2 = document.createElement("TD");
   
    oTR.setAttribute("id","file_" + fileIndex);
    oTR.setAttribute("bgcolor","#FFFFFF");
    oTD1.setAttribute("width","6%");
    oTD2.setAttribute("width","94%");
    oTD2.setAttribute("align","left");
    oTD2.innerText = oFileInput.value;
    oTD1.innerHTML = '<A href="javascript:removeFile('+ fileIndex + ');">刪除</A>';
   
    oTR.appendChild(oTD1);
    oTR.appendChild(oTD2);
    oFileList.appendChild(oTR);
  }
 
  //---移除上傳的文件
  function removeFile(fileIndex){
    var oFileInput = document.getElementById("upfile_" + fileIndex);
    var oTR     = document.getElementById("file_" + fileIndex);
    uploadFiles.removeChild(oFileInput);
    fileList.removeChild(oTR);
  }
 
  //---創(chuàng)建一個file input對象并返回
  function newFileInput(_name){
    var oFileInput = document.createElement("INPUT");
    oFileInput.type = "file";
    oFileInput.id = _name;
    oFileInput.name = _name;
    oFileInput.size="50";
    //oFileInput.setAttribute("id",_name);
    //oFileInput.setAttribute("name",_name);
    //oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>';
    //alert(oFileInput.outerHTML);
    return oFileInput;
  } 
</SCRIPT>

本文來自: IT知道網(wǎng)(http://www.) 詳細(xì)出處參考:http://www./html/programme/javascript/20080305/1031.html

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多