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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
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 unset全局变量运用问题的深入解析
2013/06/17 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
Vue 父子组件、组件间通信
2017/03/08 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
在Python中使用Neo4j的方法
2019/03/14 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Django 大文件下载实现过程解析
2019/08/01 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
中班中秋节活动反思
2014/02/18 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
2015年安全月活动总结
2015/03/26 职场文书
从事会计工作年限证明
2015/06/23 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技