你的位置:首页 > Java教程

[Java教程]点击按钮添加input type=file /代码实例


点击按钮添加<input type="file" />代码实例:
在不少网站都与这样的功能,那就是可以根据用户的需要自行添加<input type="file" />,如果感觉不需要还可以再删除,这样可以极大的提高网站的可用性,当然用户也会更加的青睐。
代码如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>增加input元素-蚂蚁部落</title><script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript" > $(document).ready(function(){  bindListener();});function bindListener(){ $("a[name=rmlink]").click(function(){  $(this).parent().remove();  })}function addimg(){  var inputStr="<div class='iptdiv'>" inputStr=inputStr+"<input type='file' name='img[]' class='ipt' />" inputStr=inputStr+"<a href='#' name='rmlink'> X </a></div>"; $("#mdiv").append(inputStr); bindListener();} </script></head><body> <form action="" method="post">  <label>请选择上传的图片</label>  <a href="javascript:addimg()" >增加图片</a>  <div class="mdiv" id="mdiv">   <div class="iptdiv" >    <input type="file" name="img[]" class="ipt" />   <a href="#" name="rmlink">X</a>   </div>  </div> </form> </body></html>

 

上面代码点击按钮可以添加一项input元素,并且点击后面的x号可以删除当前航按钮,下面就简单介绍一下实现过程。
一.实现原理:
原理很简单,就是每次点击"增加图片"链接,都可以使用append()函数添加一个div,此div中包含input元素和后面的删除链接。当点击删除链接的时候可以使用parent()函数找到当前input元素所在的div元素,然后使用remove()函数进行删除操作。
三.代码注释:
1.$(document).ready(function(){}),当文档结构完全加载完成再去执行其中的代码。
2.bindListener(),执行此函数,在下面会有对此函数的介绍。
3.function bindListener(){},为name属性值为rmlink的链接注册事件处理函数,用来删除添加的元素。
4.$("a[name=rmlink]").click(function(){}),为name属性值为rmlink的链接注册click事件处理函数。
5.$(this).parent().remove(),删除当前元素的父元素。
6.function addimg(){},创建一个函数用来添加input元素。
7.var inputStr="<div class='iptdiv'>",字符串是被用来添加的input等元素。
8.$("#mdiv").append(inputStr),为id为mydiv元素的内部结尾添加inputStr,也就是input等元素。
9.bindListener(),调用此函数。
三.相关阅读:
1.注册click事件处理函数可以参阅jQuery的click事件一章节。
2.parent()函数可以参阅jQuery的parent()和parents()方法的用法和区别一章节。
3.remove()函数可以参阅jQuery的remove()方法一章节。
4.append()函数可以参阅jQuery的append()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8674

更多内容可以参阅:http://www.softwhy.com/jquery/