WEB开发网      婵犻潧鍊婚弲顐︽偟椤栨稓闄勯柦妯侯槸閻庤霉濠婂骸浜剧紒杈ㄥ笚閹峰懘鎮╅崹顐ゆ殸婵炴垶鎸撮崑鎾趁归悩鐑橆棄闁搞劌瀛╃粋宥夘敃閿濆柊锕傛煙鐎涙ê鐏f繝濠冨灴閹啴宕熼鍡╀紘婵炲濮惧Λ鍕叏閳哄懎绀夋繛鎴濈-楠炪垽鎮归崶褍妲婚柛銊ュ缁傚秹鏁撻敓锟� ---闂佹寧娲╅幏锟�
开发学院网页设计JavaScript JavaScript实现动态增加文件域表单 阅读

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

 2009-02-13 20:05:54 来源:WEB开发网 闂侀潧妫撮幏锟�闂佸憡鍨电换鎰版儍椤掑倵鍋撳☉娆嶄沪缂傚稄鎷�婵犫拃鍛粶闁靛洤娲ㄩ埀顒佺⊕閵囩偟绱為敓锟�闂侀潧妫撮幏锟�  闂佺ǹ绻楀▍鏇㈠极閻愬灚瀚梺鍨儏閳ь剙绉归弻銊р偓闈涙啞閻h京鈧敻鍋婇崰鏍х暦閿燂拷
核心提示:对于上传多个文件,可以通过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 实现 动态

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