posts - 27,  comments - 14,  trackbacks - 0
          方式一:事先寫好多個input.在點擊時才顯示。也就是說上傳的最大個數是寫死了的。
          HTML代碼:
          <p>
          <href='#' onclick='javascript:viewnone(more1)'> 添加附件 </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>

          方式二:這種方式的動態多文件上傳是實現了的,很簡單。
          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>

          方式三:動態多文件上傳,只是在oFileInput.click();這個地方,這樣做就不能上傳這個文件了,因為發現它在上傳之時就把這個input中的文件置空了。很可能是為了安全著想吧!
          另外還有一點就是說,click()只有在ie中才能正常運行。
          雖說這種方式最終沒能實現上傳,但還是留下來參考,看看是否有人可以真正實現上傳。
          HTML代碼:
          <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代碼:
           1<SCRIPT language="javascript">
           2
           3    //---新建上傳
           4    function newUpload(){
           5        var oFileList = document.getElementById("fileList");
           6        var fileCount = oFileList.childNodes.length + 1;
           7        var oFileInput = newFileInput("upfile_" + fileCount);
           8        if(selectFile(oFileInput)){
           9            addFile(oFileInput);
          10        }

          11    }

          12    
          13    
          14    //----選擇文件
          15    function selectFile(oFileInput){
          16        var oUploadFiles = document.getElementById("uploadFiles");
          17        oUploadFiles.appendChild(oFileInput);
          18        oFileInput.focus();
          19        oFileInput.click();//不能這樣做,可能是為了安全著想吧!
          20        var fileValue = oFileInput.value;
          21        if(fileValue == ""){
          22            oUploadFiles.removeChild(oFileInput);
          23            return false;
          24        }

          25        else
          26         return true;
          27        
          28    }

          29    
          30    //---新建一個文件顯示列表
          31    function addFile(oFileInput){
          32        var oFileList = document.getElementById("fileList");
          33        var fileIndex = oFileList.childNodes.length + 1;
          34        var oTR  = document.createElement("TR");
          35        var oTD1 = document.createElement("TD");
          36        var oTD2 = document.createElement("TD");
          37        
          38        oTR.setAttribute("id","file_" + fileIndex);
          39        oTR.setAttribute("bgcolor","#FFFFFF");
          40        oTD1.setAttribute("width","6%");
          41        oTD2.setAttribute("width","94%");
          42        oTD2.setAttribute("align","left");
          43        oTD2.innerText = oFileInput.value;
          44        oTD1.innerHTML = '<A href="javascript:removeFile('+ fileIndex + ');">刪除</A>';
          45        
          46        oTR.appendChild(oTD1);
          47        oTR.appendChild(oTD2);
          48        oFileList.appendChild(oTR);
          49    }

          50    
          51    //---移除上傳的文件 
          52    function removeFile(fileIndex){
          53        var oFileInput = document.getElementById("upfile_" + fileIndex);
          54        var oTR        = document.getElementById("file_" + fileIndex);
          55        uploadFiles.removeChild(oFileInput);
          56        fileList.removeChild(oTR);
          57    }

          58    
          59    //---創建一個file input對象并返回
          60    function newFileInput(_name){
          61        var oFileInput  = document.createElement("INPUT");
          62        oFileInput.type = "file";
          63        oFileInput.id = _name;
          64        oFileInput.name = _name;
          65        oFileInput.size="50";
          66        //oFileInput.setAttribute("id",_name);
          67        //oFileInput.setAttribute("name",_name);
          68        //oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>';
          69        //alert(oFileInput.outerHTML);
          70        return oFileInput;
          71    }

          72    
          73</SCRIPT>
          74
          第三種方式的改進方案提示:
                   做一個 添加附件 然后做一個type為file的input框,把此框和span定位重疊起來 把file框透明度設置為0 即完全看不到,但是確實存在。這個時候點span的時候就是在點這個file框 但是看不到file框子 是不是實現了呢? 然后再結合你第二種的方式給框編號 動態增加就可以實現多文件上傳了 。

          (本文轉自http://www.aygfsteel.com/bnlovebn/archive/2007/01/26/96194.aspx
          posted on 2007-07-12 17:23 Scott.Pan 閱讀(2771) 評論(1)  編輯  收藏 所屬分類: 代碼收藏夾

          FeedBack:
          # re: 幾種js實現的動態多文件上傳
          2014-08-25 15:54 | 11
          最后一種不能用  回復  更多評論
            
          <2014年8月>
          272829303112
          3456789
          10111213141516
          17181920212223
          24252627282930
          31123456

          常用鏈接

          留言簿(4)

          隨筆分類

          隨筆檔案

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 怀仁县| 遵义县| 青神县| 兰溪市| 皋兰县| 廊坊市| 库尔勒市| 兴隆县| 墨竹工卡县| 黑河市| 城步| 巴南区| 井冈山市| 林甸县| 稻城县| 金华市| 昌宁县| 巴林左旗| 洛川县| 鹤岗市| 沁阳市| 昭苏县| 临汾市| 上栗县| 平利县| 湘西| 巴彦县| 天峨县| 乐山市| 德钦县| 福泉市| 太白县| 稻城县| 巫山县| 章丘市| 乌拉特后旗| 灵丘县| 六盘水市| 南充市| 根河市| 江达县|