用js实现的可以动态控制的上传文件的数量的东东,具牛比!!!

用纯js脚本实现上传文件的数量:
1 首先,在body中加入onLoad事件。
<script   language="JavaScript"> 
function showpic(pic){
 eval(pic).style.display="";
}
function dispic(pic){
 eval(pic).style.display="none";
}
function showNext(num,buttonID)
{
  showpic(num);
  dispic(buttonID);
}
 var rownum=0;
 var xsdNum=0;
 var inputFileNum=0;
 var flag=false;
 function addText(formID,tableID)
 {
       var uploadFileTable=document.getElementById(tableID); 
       var rows=uploadFileTable.rows;
    var currentRow=rownum++;
    var newRow=uploadFileTable.insertRow();  
    //var rowNumCell=newRow.insertCell(0); 
    //var tempRowNum=currentRow+1; 
    // rowNumCell.innerHTML="<b></b>";      
    var filePathCell=newRow.insertCell(0);  
    var fileUploadInputHTML="";
    fileUploadInputHTML="<div id=/"text_"+ currentRow +"/" name=/"text_"+ currentRow +"/" style=/"display:/"/"; position:absolute; z-index:99;/" >"; 
    //fileUploadInputHTML+="<input name=/"ssdxname"+ currentRow +"/" type=/"text/" id=/"ssdxname"+ currentRow +"/" size=/"20/" //>";
    fileUploadInputHTML+="<input name=/"ssdxfile"+ inputFileNum +"/" type=/"file/" id=/"ssdxfile"+ inputFileNum +"/" size=/"30/" onChange=/"showSub("+currentRow+");/" //>";
       fileUploadInputHTML+="</div>";
    filePathCell.innerHTML=fileUploadInputHTML;
 }
 function showSub(currentRow)
 {    
      //
      //var   strFileFormat=ssdxfile.match(/^(.*)(/.)(.{1,8})$/)[3];//检查上传文件格式  
      //strFileFormat=strFileFormat.toUpperCase();  
   //if(strFileFormat=="JPG"||strFileFormat=="BMP"||strFileFormat=="GIF")  
   //{  
        
      
      
       dispic("text_"+currentRow);
       showpic('up1');
       var uploadFileTable=document.getElementById("uploadFileTableID"); 
       var rows=uploadFileTable.rows;
      
    var subcurrentRow=0;
    if(rows!==null)      
     {
     subcurrentRow=rows.length;  
     } 
    var newRow=uploadFileTable.insertRow();  
    var rowNumCell=newRow.insertCell(0); 
    var tempRowNum=subcurrentRow+1 
    rowNumCell.innerHTML="<b>"+tempRowNum+"</b>";      
    //var filePathCell=newRow.insertCell(1); 
    var myform= document.taskControlForm;
    //alert(myform);
    //var textname="ssdxname"+currentRow;
   // alert(textname);
    //var filename="ssdxfile"+currentRow;
    //alert(filename);
    //var ssdxname=eval("document.taskControlForm.ssdxname"+currentRow).value;
    //alert(ssdxname);
    var ssdxfile=eval("document.taskControlForm.ssdxfile"+inputFileNum).value;
 
    var Name=ssdxfile.substring(ssdxfile.lastIndexOf('//')+1,ssdxfile.lastIndexOf('.')-1);
    //alert(Name);
  
       var operationCell=newRow.insertCell(1);
    var subHtml="";
    //subHtml+="<div id=/"pic_"+ inputFileNum +"/" style=/"position:absolute; z-index:99;/" >"; 
  subHtml+=""+Name;
     //subHtml+="</div>";
    //if(eval("document.taskControlForm.ssdxname"+currentRow).value!="")
    //{
  // subHtml+="[<a href=/"#/" οnmοuseοver=/"showpic('pic_"+ currentRow +"');/" onMouseOut=/"dispic('pic_"+ currentRow +"');/">"+ ssdxname +"</a>]"; 
    //}
    //else
   // {
      //subHtml+="<a href=/"#/" οnmοuseοver=/"showpic('pic_"+ inputFileNum +"');/" onMouseOut=/"dispic('pic_"+ inputFileNum +"');/"><img  src=/" "+ ssdxfile + "/" width='100' height='80' /></a>"; 
    //} 
    operationCell.innerHTML= subHtml;
   
    var delCell=newRow.insertCell(2); 
    var opetaionICONHTML= "<td align='center'>[<a href='#' onClick='return delUploadFileIcon(/"tableID/",/"uploadFileTableID/","+currentRow+");'>删除</a>]</td>";
    delCell.innerHTML= opetaionICONHTML;
    xsdNum++;
    inputFileNum++;
    document.taskControlForm.xsdNum.value=xsdNum;
   indexUploadFile('tableID','uploadFileTableID');
   if(xsdNum<3)
   {
   
    addText('taskControlForm','tableID');
   } 
   else
   {
      flag=true;
      dispic('up2');
   }
  //}  
  // else  
   //{  
   //  window.confirm("只能上传.Doc和.Dot,请重新选择!");
   //}
  
 }
</script>
<script language="javascript">


//删除行  
function delUploadFileIcon(tableID,fileID,rowNO)
{      
   if(confirm("您将删除上传文件,是否继续?"))
   {
  var uploadFileTableDel=document.getElementById(tableID);
          //alert(rowNO);
        uploadFileTableDel.deleteRow(rowNO);  
       
        var uploadFileTableDel2=document.getElementById(fileID);
        //alert(rowNO);
        uploadFileTableDel2.deleteRow(rowNO);
        xsdNum--;
        document.taskControlForm.xsdNum.value=xsdNum;
   }
   //indexUploadFile(tableID);
   if(xsdNum<3 && flag==true)
   {
       addText('taskControlForm','tableID');
       flag=false;
       showpic('up2');
   }
   if(xsdNum==0)
   {
       dispic('up1');
   }
   indexUploadFile("tableID","uploadFileTableID");
  
   //return false;
}
function indexUploadFile(tableID,tID)
{
 
   var uploadFileTable2=document.getElementById(tID);
   var rows2=uploadFileTable2.rows;
   if(rows2!==null)
   { 
    for(var i=0;i<rows2.length;i++)
    {
      rows2[i].cells[0].innerHTML=i+1;
   rows2[i].cells[2].innerHTML="[<a href='#' onClick=' return delUploadFileIcon(/"tableID/",/"uploadFileTableID/","+i+");'>删除</a>]";
  
    }
   }
   var uploadFileTable3=document.getElementById(tableID);
   var rows3=uploadFileTable3.rows;
   if(rows3!==null)
   { 
    for(var i=0;i<rows3.length;i++)
    {
      //rows3[i].cells[0].innerHTML=i+1;
   //rows[i].cells[2].innerHTML="[<a href='#' onClick='return delUploadFileIcon(/""+tableID+"/","+i+");'>删除</a>]";
  
    }
   }
}
</script>

<body οnlοad="addText('form1','tableID');">

2 页面的展示区域:
<form name="taskControlForm">
 <tr id="up1" style="display:none;">
        <td align="right">上传文件名:</td>
        <td align="left" colspan="3"><table  border="0" id="uploadFileTableID"></table></td>
   </tr>
   <tr id="up2">
        <td align="right">请选择上传文件:</td>
        <td align="left" colspan="3"><table  border="0" id="tableID"></table></td>
</tr>

        <input type="hidden" name="xsdNum" value=""/>  计数器
</form> 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值