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

时间：2007-09-19 来源：linxh

本文转自： http://hi.baidu.com/injava/blog/item/5c7e8a821ba42fbf6d8119fa.html 方式一：事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
html

<p>

</span>

</div>

</div>

</p> js <SCRIPT language="javascript">
  function viewnone(e){
    e.style.display=(e.style.display=="none")?"":"none";
  }
</script>
方式二:这种方式的动态多文件上传是实现了的，很简单的，不说废话看code
html

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