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

Javascript
javaScript 数值型和字符串型之间的转换
从父页面读取和操作iframe中内容方法
IE DOM实现存在的部分问题及解决方法
jqPlot Option配置对象详解
jquery JSON的解析方式
JavaScript 捕获窗口关闭事件
xml 封装与解析(javascript和C#中)
JavaScript 设计模式学习 Singleton
JavaScript 设计模式学习 Factory
javascript CSS画图之基础篇
JavaScript 获取事件对象的注意点
JavaScript Konami Code 实现代码
Google Map API更新实现用户自定义标注坐标
JavaScript this 深入理解
javascript EXCEL 操作类代码
window.parent调用父框架时 ie跟火狐不兼容问题
关于取不到由location.href提交而来的上级页面地址的解决办法
JS input 数字验证代码
网页全屏显示代码说明分析
JS 学习笔记 防止发生命名冲突

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 316 ::
收藏到网摘: 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>