jquery实现的动态添加或者删除<input type="file">元素:
在实际应用中，可能根据实际需要添加更多的<input type="file">元素,例如在上传更多的产品图片的时候就可能需要此功能，下面就通过代码实例介绍一下如何实现此功能，代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("input[type=button]").click(function(){ var br = $("<br>"); var input = $("<input type='file'/>"); var button = $("<input type='button' value='删除'/>"); $("#thediv").append(br).append(input).append(button); button.click(function(){ br.remove(); input.remove(); button.remove(); }) }) }) </script> </head> <body> <div id="thediv"> <input type="file" id="upload"/> <input type="button" id="btn" value="添加一项"/> </div> </body> </html>
以上代码实现了我们想要的功能，点击添加可以添加更多的上传控件，可以删除添加的空间。
一.代码注释:
1.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
2.var br = $("<br>")，创建一个<br>对象。
3.var input = $("<input type='file'/>")，创建一个("<input type='file'/>对象。
4.var button = $("<input type='button' value='删除'/>")，创建一个<input type='button' value='删除'/>对象。
5.$("#thediv").append(br).append(input).append(button)，在id属性值为thediv的div内部的结尾依次添加相应对象。
6.button.click(function(){})，为按钮注册click事件处理函数。
7.br.remove()，input.remove()，button.remove()，删除对应的元素。
二.相关阅读:
1.[type=button]可以参阅jQuery的[attribute=value]选择器一章节。
2.append()函数可以参阅jQuery的append()方法一章节。
3.remove()函数可以参阅jQuery的remove()方法一章节。
原文地址是：http://www.softwhy.com/forum.php?mod=viewthread&tid=11667
更多内容可以参阅:http://www.softwhy.com/jquery/