jQuery动态添加及删除表单上传元素的方法(附demo源码下载)


Posted in Javascript onJanuary 15, 2016

本文实例讲述了jQuery动态添加及删除表单上传元素的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

点击此处查看在线演示效果。

具体代码如下:

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(":input[type=button][value=more]").bind("click",function(){
 var $br = $("<br />");
 var $file = $("<input type='file' name='name1' />");
 var $button = $("<input type='button' value='delete'>");
 $(this).after($file).after($button).after($br);
 $button.bind("click",function(){
  $br.remove();
  $file.remove();
  $button.remove();
 })
 })
});
</script>
</head>
<body>
<input type="file" name="file1" /><input type="button" value="more" />
</body>
</html>

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
js实现自定义进度条效果
Mar 15 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 #Javascript
JavaScript提高性能知识点汇总
Jan 15 #Javascript
学习JavaScript设计模式之中介者模式
Jan 14 #Javascript
轻松实现jquery手风琴效果
Jan 14 #Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 #Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 #Javascript
分享网页检测摇一摇实例代码
Jan 14 #Javascript
You might like
zend framework文件上传功能实例代码
2013/12/25 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
PHP进程同步代码实例
2015/02/12 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
python dict 相同key 合并value的实例
2019/01/21 Python
详解Python3中ceil()函数用法
2019/02/19 Python
Django对models里的objects的使用详解
2019/08/17 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
详解Python中的文件操作
2021/01/14 Python
python中使用np.delete()的实例方法
2021/02/01 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
四群教育工作实施方案
2014/03/26 职场文书
应急处置方案
2014/06/16 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
先进班组事迹材料
2014/12/25 职场文书