首页 > 网络编程 > JavaScript > 表单特效 > JavaScript动态增加

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

2009-02-12 20:30:05 作者：

对于上传多个文件，可以通过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" onkeydown="return false;"/>'; 
str += "&nbsp;<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> 

您可能感兴趣的文章:

js实现动态增加文件域表单功能