动态多附件上传 多附件动态上传

边在网上找边自己想,终于是搞出个完整的东西来,贴在这里希望能够帮到那些还在摸的编程兄弟们 ,还有要感谢那些把资料贴出来的csdn 兄弟们,谢谢大家了

<html><head> 
 <style>
 a.addfile {
  background-image:url(
http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
  background-repeat:no-repeat;
  background-position:-823px -17px;
  display:block;
  float:left;
  height:20px;
  margin-top:-1px;
  position:relative;
  text-decoration:none;
  top:0pt;
  width:80px;
 } 
 input.addfile {
  /*left:-18px;*/
 } 
 input.addfile {
  cursor:pointer !important;
  height:18px;
  left:-13px;
  filter:alpha(opacity=0);
  position:absolute;
  top:5px;
  width:1px;
  z-index: -1;
 }
</style>
<script language="javascript" >
    var n=0;                 //初始化数组为0,之后随着化来变化
    var fileCount=1;         //总共输入了多少个有值的控件 File ,初始化为1  
    var tempRow=0;           //动态表格的临时行
    var maxRows=0;           //动态表格的临时列
    var num = 1;             //file 控件数组下标,从1开始,默认显示一个所以那个是 0
    var fileCount=1;         //整个操作中,总共用了多少个 File 控件
   
    function addFile()
    { 
  var str = '<a href=#? class="addfile" id="a' + num +'"><input type="file" size="50" class="addfile" οnchange="addFile()" name="uploadFile[' + num + '].file" ' + '/>'; //待插入的文件控件
  var fileText;     //得到文件控件的值
  var ary;      //分割文件,以'/'号
  var fileTextValue;    //取出最后的文件名
    fileText = document.all("uploadFile[" + n + "].file").value;
  ary = fileText.split("//");                       
   fileTextValue = ary[ary.length-1];
  document.all("a" + n).style.display = "none";  //将前一个 P 的子元素设为不可见
        
    //在前面一个 File 控件隐藏后,接着再在原来的位置上插入一个
    document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str);

  //这里可以灵活处理  
      tempRow=fileTable.rows.length-1;    //fileTable   就是那个动态的   table 的 ID 了
     maxRows=tempRow;
     tempRow=tempRow+1;
     var Rows=fileTable.rows;            //Rows 数组
     var newRow=fileTable.insertRow(fileTable.rows.length);    //插入新的一行
     var Cells=newRow.cells;                                   //Cells 数组
     for (i=0;i<3;i++)                                         //每行的2列数据,一列用来显示文件名,一列显示"删除"操作
     {
       var newCell=Rows(newRow.rowIndex).insertCell(Cells.length);
       newCell.align="center";
       switch (i)
       {
         case 0 : newCell.innerHTML="<td width='40%' align='left'><span id='"+n+"'></span></td>";break;
         case 1 : newCell.innerHTML="<td width='20%' align='left'><a href='javascript:delTableFileRow(/"" +tempRow+ "/",/"" + n + "/")'>删除</a></TD>"; break;
     case 2 : newCell.innerHTML="<td width='40%' align='left'>&nbsp;</TD>"; break;
       }
     }
     maxRows+=1;
     document.getElementById(n).insertAdjacentText("beforeBegin",fileTextValue);
  n++;
  num++;
  fileCount++;
    }

  function delTableFileRow(rowNum,fileCount){    
    if (fileTable.rows.length >rowNum){
       fileTable.deleteRow(rowNum);    //删除当关行
    }else
     fileTable.deleteRow(fileTable.rows.length-1);
    document.all("MyFile").removeChild(document.all("a" + fileCount)); //从元素P上删除子结点 a 。(跟删除表格行同步)
    fileCount--;     //总数 -1
  }  
 
</script>
</head>
<body>
<form id="kkk" action="/KmZszbfj.do" enctype="multipart/form-data" method="POST">
<table width="830" height="385" border="0" align="center"
  cellpadding="0" cellspacing="0" id='tableA'>
  <tr>     
     <td height="27" align="center" bgcolor="#E2F0FE" class="time">附件</td>
     <td height="79" align="center" colSpan="3" bgcolor="#E2F0FE" class="time"> 

      <div align="left"> 
          <P id="MyFile">
         <a href=#? class="addfile" id="a0">
          <input type="file" class="addfile" οnchange="addFile()" size="1" name="uploadFile[0].file"  value=""/>
         </a>
        </P>
          <P id="btnFile">  
         &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="btnAddFile" value="text html" οnclick="javascript:alert(MyFile.innerHTML);"/>
        </P> 
       <table width="100%" height="100%" border="0">
        <tr><td width="40%" align="left"></td><td width="60%"></td></tr>
        <tr>
         <td colspan="2">
          <table width="100%" border="0" id="fileTable" align="left"></table>
         </td>        
       </table>
      </div> 
     </td> 

    </tr>
</table>
</body></html>

评论 9 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

zhongbx

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值