点击按钮添加<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/

爱程序网

点击按钮添加&lt;input type=&quot;file&quot; /&gt;代码实例

Tags：[db:关键字]