<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>

方式二:這種方式的動態多文件上傳是實現了的，很簡單的，不說廢話看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>

方式三：動態多文件上傳，只是在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

<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);
    }
//---創建一個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>

posted on 2007-01-26 17:21 重歸本壘（BNBN） 閱讀(1656) 評論(4) 編輯 收藏 引用 所屬分類: JS

評論

# re: 幾種js實現的動態多文件上傳 2007-01-27 13:20 施偉

呵呵，我的方法不知道和你的三種方法有沒有可比性，個人感覺還不錯！
做一個 添加附件 然后做一個type為file的input框，把此框和span定位重疊起來 把file框透明度設置為0 即完全看不到，但是確實存在。這個時候點span的時候就是在點這個file框 但是看不到file框子 是不是實現了呢？ 然后再結合你第二種的方式給框編號 動態增加就可以實現多文件上傳了 。
呵呵 我在我的程序里面這樣實現的 很好用 如果有興趣討論到我blog留言 或者發郵件給我吧 多交流。。。
回復 更多評論

# re: 幾種js實現的動態多文件上傳 2007-01-29 18:00 重歸本壘（BNBN）

@施偉
呵呵！施偉，你這樣做，如果實現了，那么比我的方法更勝一籌了，我以前也這樣考慮過，只是覺的好麻煩，而沒有去實現它！
另外，還非常謝謝你能關注我的Ｂolg!
回復 更多評論

# re: 幾種js實現的動態多文件上傳 2007-02-12 17:12 路過的

施偉 的做法，是不是還是不能解決，先選擇了一個文件，提交服務器之后這個file input域的值又被自動清空的問題？  回復 更多評論

# re: 幾種js實現的動態多文件上傳 2007-06-04 11:28 sangern

第二種方法不錯  回復 更多評論