动态多附件方式

 方式一:事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
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>
方式二:这种方式的动态多文件上传是实现了的,很简单的,不说废话看code
html
<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>
方式三:动态多文件上传,只是在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;
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值