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