你的位置:首页 > Java教程

[Java教程]jquery实现的动态添加或者删除input type=file元素


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/