方式一:事先寫好多個input.在點擊時才顯示。也就是說上傳的最大個數(shù)是寫死了的。
html <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>js <SCRIPT language="javascript"> function viewnone(e){ e.style.display=(e.style.display=="none")?"":"none"; } </script> 方式二:這種方式的動態(tài)多文件上傳是實現(xiàn)了的,很簡單的,不說廢話看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> 方式三:動態(tài)多文件上傳,只是在oFileInput.click();這個地方,這樣做就不能上傳這個文件了,因為發(fā)現(xiàn)它在上傳之時就把這個input中的文件置空了。很可能是為了安全著想吧! 另外還有一點就是說,click()只有在ie中才能正常運行。 雖說這種方式最終沒能實現(xiàn)上傳,但還是留下來參考,看看是否有人可以真正實現(xiàn)上傳。 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); } //---創(chuàng)建一個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> |
|