jquery动态添加和删除<input type="file" />

我心飞翔 分类:实例代码

本章节分享一段代码实例,它实现了动态添加或者删除<input type="file" />标签的功能。

在很多时候,上传的文件可能根据实际情况来决定,所以动态的添加或者删除此控件还是很有必要的。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.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>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码实例:

(1).$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2).$(":input[type=button][value=more]").bind("click",function(){}),为type属性值为button和value等于more的input元素注册click事件处理函数。(3).var $br = $("<br />"),创建一个<br>元素对象。

(4).var $file = $("<input type='file' name='name1' />"),创建一个上传控件。

(5).var $button = $("<input type='button' value='delete'>"),创建一个删除按钮。

(6).$(this).after($file).after($button).after($br),在more按钮后面以此插入上述创建的元素。

(7).$button.bind("click",function(){

  $br.remove();

  $file.remove();

  $button.remove();

}),删除指定的元素。

二.相关阅读:

(1).[type=button][value=more]可以参阅jQuery [attribute=value]一章节。

(2).after()可以参阅jQuery after()一章节。

(3).remove()可以参阅jQuery remove()一章节。

jquery动态添加和删除<input type="file" />,这样的场景在实际项目中还是用的比较多的,关于jquery动态添加和删除<input type="file" />就介绍到这了。

jquery动态添加和删除<input type="file" />属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容