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 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
JavaScript实现PC端横向轮播图
Feb 07 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
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
vuejs点击class变化的实例
2018/09/05 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python Tkinter 简单登录界面的实现
2019/06/14 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
物业管理求职自荐信
2013/09/25 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
合作意向书格式及范文
2014/03/31 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
英语课外活动总结
2014/08/27 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL