javascript动态多附件上传实现方法

<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>
<SCRIPT language="javascript">
function viewnone(e){
  e.style.display=(e.style.display=="none")?"":"none";
}
</script>

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

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

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

<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;
    } www.jb200.com
    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>