几种js实现的动态多文件上传

 

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

<p>
<a 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.ο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代码：

<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代码：

 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框子 是不是实现了呢？ 然后再结合你第二种的方式给框编号 动态增加就可以实现多文件上传了 。