当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript实现动态增加文件域表单

Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
在线演示常用javascript特效
Meta 标签生成器
动态生成的IFRAME,设置SRC时的问题解决分析
CSS常用网站布局实例
JS动画效果代码2
JS动画效果代码3
js COL能很好的控制表格的列
readonly和disabled的区别
在CSS里写复杂的JavaScript脚本
用JavaScript操作WinRar
javascript add event remove event
HTML中Select不用Disabled实现ReadOnly的效果
用JavaScript调用WebService的示例
大家未必知道的Js技巧收藏
js批量上传界面的实现
javascript倒计时效果代码,可以方便参数调用
能在网页中写字和能擦写的js程序
javascript背投广告代码的完善
js函数般调用正则

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 231 ::
收藏到网摘: n/a

对于上传多个文件,可以通过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 += " <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>