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

更新时间：2018年10月22日 09:34:13 作者：dq_095

这篇文章主要为大家详细介绍了js实现动态增加文件域表单功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现动态增加文件域表单的具体代码，供大家参考，具体内容如下

实现代码：

<html>
<head>
 <title>动态添加表单元素</title>
</head>

<script language="javascript"> 
 //全局变量，代表文件域的个数，并用该变量区分文件域的name属性 
 var file_count = 0;
 //增加文件 域 
 function additem(id) {
  if (file_count > 9) {
   alert("最多10个 ");
   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>

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

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

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

Bootstrap每天必学之表单
Bootstrap每天必学之表单，本文讲解的就是大家最为常用的提交数据的Form表单，感兴趣的小伙伴们可以参考一下
2015-11-11
js检测判断日期大于多少天的方法
这篇文章主要介绍了js检测判断日期大于多少天的方法,涉及javascript操作日期的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-05-05
jquery div模态窗口的简单实例
下面小编就为大家带来一篇jquery div模态窗口的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
小程序跳转H5页面的方法步骤
这篇文章主要介绍了小程序跳转H5页面的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
js根据手机客户端浏览器类型，判断跳转官网/手机网站多个实例代码
这篇文章主要介绍了js根据手机客户端浏览器类型，判断跳转官网/手机网站多个实例代码,需要的朋友可以参考下
2016-04-04
JavaScript中工厂函数与构造函数示例详解
这篇文章主要给大家介绍了关于JavaScript中工厂函数与构造函数的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
如何通过js实现图片预览功能【附实例代码】
如何通过js实现图片预览功能呢？下面小编就为大家带来一篇用js实现图片预览功能。给大家做个参考吧，一起跟随小编过来看看
2016-03-03
JS实现灯泡开关特效
这篇文章主要为大家详细介绍了JS实现灯泡开关特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
js 数组随机字符串(广告不重复)
今天一个网友想让他的广告随机显示，每次刷新广告的内容都不一样，经过参考源码网站分析就是通过下面代码实现，特分享下方便需要的朋友
2013-08-08
js读取注册表的键值示例
读取注册表的键值的方法有很多，在本文将为大家详细介绍下使用js如何实现注册表的键值读取，感兴趣的朋友可以参考下
2013-09-09