动态多文件上传

转载于  Virgo_S

方式一：事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
html

Java代码

1. <p>   
2. <a href='#' οnclick='javascript:viewnone(more1)'> 添加附件 </a>   
3. <div id='more1' style='display:none'>   
4.     <input type="file" name="attach1" size="50"javascript:viewnone(more2)>   
5.     </span>   
6. </div>   
7. <div id='more2' style='display:none'>   
8.     <input type="file" name="attach2" size="50"'>   
9. </div>   
10. </p>  

<p>
<a href='#' οnclick='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

Java代码

1. <SCRIPT language="javascript">   
2.   function viewnone(e){   
3.     e.style.display=(e.style.display=="none")?"":"none";   
4.   }   
5. </script>  

<SCRIPT language="javascript">
  function viewnone(e){
    e.style.display=(e.style.display=="none")?"":"none";
  }
</script>

方式二:这种方式的动态多文件上传是实现了的

html

Java代码

1. <input type="button" name="button" value="添加附件" οnclick="addInput()">   
2. <input type="button" name="button" value="删除附件" οnclick="deleteInput()">   
3. <span id="upload"></span>  

<input type="button" name="button" value="添加附件" οnclick="addInput()">
<input type="button" name="button" value="删除附件" οnclick="deleteInput()">
<span id="upload"></span>

js

Java代码

1. <script type="text/javascript">   
2.         var attachname = "attach";   
3.         var i=1;   
4.           function   addInput(){   
5.             if(i>0){   
6.                   var attach = attachname + i ;   
7.                   if(createInput(attach))   
8.                       i=i+1;   
9.               }   
10.                  
11.           }    
12.           function deleteInput(){   
13.                   if(i>1){   
14.                     i=i-1;   
15.                     if(!removeInput())   
16.                         i=i+1;   
17.                 }   
18.           }    
19.              
20.           function createInput(nm){      
21.               var  aElement=document.createElement("input");      
22.              aElement.name=nm;   
23.              aElement.id=nm;   
24.              aElement.type="file";   
25.              aElement.size="50";   
26.               //aElement.value="thanks";      
27.              //aElement.οnclick=Function("asdf()");     
28.                if(document.getElementById("upload").appendChild(aElement) == null)   
29.                       return false;   
30.                return true;   
31.           }     
32.   
33.           function removeInput(nm){   
34.                var aElement = document.getElementById("upload");   
35.                 if(aElement.removeChild(aElement.lastChild) == null)   
36.                     return false;   
37.                 return true;      
38.           }     
39.              
40. </script>  

<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.οnclick=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

Java代码

1. <A href="javascript:newUpload();">添加附件</A>   
2. <TABLE width="100%" border="0" cellpadding="0" cellspacing="1">   
3.     <TBODY id="fileList"></TBODY>   
4. </TABLE>   
5. <DIV id="uploadFiles" style="display:block"></DIV>  

<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

Java代码

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>