转载于 Virgo_S
方式一:事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
html
- <p>
- <a href='#' οnclick='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>
<p>
<a href='#' οnclick='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>
<SCRIPT language="javascript">
function viewnone(e){
e.style.display=(e.style.display=="none")?"":"none";
}
</script>
方式二:这种方式的动态多文件上传是实现了的
html
- <input type="button" name="button" value="添加附件" οnclick="addInput()">
- <input type="button" name="button" value="删除附件" οnclick="deleteInput()">
- <span id="upload"></span>
<input type="button" name="button" value="添加附件" οnclick="addInput()">
<input type="button" name="button" value="删除附件" οnclick="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.οnclick=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>
<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.οnclick=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>
<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>