WEB开发网
开发学院网页设计JavaScript JavaScript实现动态增加文件域表单 阅读

JavaScript实现动态增加文件域表单

 2009-02-13 20:05:54 来源:WEB开发网   
核心提示:对于上传多个文件,可以通过js来动态生成文件域,JavaScript实现动态增加文件域表单,下面是源代码,收藏在这里,代表文件域的个数,并用该变量区分文件域的name属性 var file_count = 0; //增加文件 域 function additem(id) { if (file_count &

对于上传多个文件,可以通过js来动态生成文件域,下面是源代码,收藏在这里,供以后直接使用,hoho!

js代码:

<script language="javascript">

  //全局变量,代表文件域的个数,并用该变量区分文件域的name属性

  var file_count = 0;

  //增加文件 域  

  function additem(id) {

   if (file_count > 9) {

  alert("最u22810 10个u25991 件u22495 ");

  return;

  }

  //定义行变量row;单元格变量cell;单元格内容变量str。

  var row,cell,str;

  //在指定id的table中插入一行

  row = eval("document.all["+'"'+id+'"'+"]").insertRow();

  if(row != null ) {

   //设置行的背景颜色

   row.bgColor="white";

   //在行中插入单元格

   cell = row.insertCell();

   //设置str的值,包括一个文件域和一个删除按钮

   str='<input onselectstart="return false" class="tf" onpaste="return false" type="file"  name="file[' + file_count + ']" style="width:500px" />';

   str += " <input type="+'"'+"button"+'"'+" value="+'"'+"删除"+'"'+"  onclick='deleteitem(this,"+'"'+"tb"+'"'+");'>";

   //文件域个数增加

   file_count++;

   //设置单元格的innerHTML为str的内容

   cell.innerHTML=str;

  }

}
  //删除文件域
  function deleteitem(obj,id) {
   var rowNum,curRow;
   curRow = obj.parentNode.parentNode;
   rowNum = eval("document.all."+id).rows.length - 1;
   eval("document.all["+'"'+id+'"'+"]").deleteRow(curRow.rowIndex);
   file_count--;
  }
</script>

html代码:

 <input type=button value="增加" onclick='additem("tb")'/><br/>
 <table cellspacing="0" id="tb" style="width:400px">
 </table>

Tags:JavaScript 实现 动态

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接