JavaScript动态数量的文件上传控件


Posted in Javascript onNovember 18, 2016

js动态数量的文件上传控件实现代码如下所述:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动态数量的文件上传</title>
<script type="text/javascript" src="jquery-2.2.0.min.js">
</script><script type="text/javascript">
$(function(){
var i=2;
$("#addFile").click(function(){
$(this).parent().parent().before("<tr class='file'><td>File"
+i+":</td><td><input type='file' name='file"
+i+"'/></td></tr>"
+"<tr class='desc'><td>Desc"
+i+":</td><td><input type='text' name='desc"
+i+"'/><button id='delete"
+i+"'>删除</button></td></tr>");
i++;
//删除
$("#delete"+(i-1)).click(function(){
var $tr=$(this).parent().parent();
$tr.prev("tr").remove();
$tr.remove();
//对i排序
$(".file").each(function(index){
var n=index+1;
$(this).find("td:first").text("File"+n);
$(this).find("td:last input").attr("name","file"+n);
});
$(".desc").each(function(index){
var n=index+1;
$(this).find("td:first").text("Desc"+n);
$(this).find("td:last input").attr("name","desc"+n);
});
});
});
});
</script>
</head>
<body>
<table>
<tr class="file">
<td>File1:</td>
<td><input type="file" name="file1"/></td>
</tr>
<tr class="desc">
<td>Desc1:</td>
<td><input type="text" name="desc1"/></td>
</tr>
<tr>
<td><input type="submit" id="submit" value="上传"/></td>
<td><button id="addFile">增加</button></td>
</tr>
</table>
</body>
</html>

好了,代码到此结束了,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
EXT中xtype的含义分析
Jan 07 Javascript
一个简单的js鼠标划过切换效果
Jun 30 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
js实现日历
Nov 07 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 #Javascript
Node.js 实现简单小说爬虫实例
Nov 18 #Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 #Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 #Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 #Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 #Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 #Javascript
You might like
php单文件版在线代码编辑器
2015/03/12 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
Python封装原理与实现方法详解
2018/08/28 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python实现的Iou与Giou代码
2020/01/18 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Python自带的IDE在哪里
2020/07/01 Python
python装饰器代码深入讲解
2021/03/01 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
租车协议书范本
2014/04/22 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
教师节主题班会教案
2015/08/17 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang