【原创】 JQ克隆元素
栏目:HTML  作者:隆航  阅读:(1283)

在模板中需要用到循环遍历,然后中间有个文件上传,用到了克隆

  1. 单文件的上传

blob.png

html代码:

<div class="addfiles">
<a class="addfile"/>添加</a>
<input type="file" name="file[]" id="" value="" class="contractfile" accept="image/*"/>
</div>
<script>
$(".addfile").click(function(){
$(".addfiles").append($(".contractfile").clone(true));//1
//$(".addfiles").append($(".contractfile:first").clone(true));//2
});
</script>

具体做法是,在页面上有a标签addfile。

然后点击一次需要增加一个上传文件的按钮,但是会遇到一个问题,就是第一次点击增加一个,第二次点击就是增加2个,所以这里需要用到第二种写法了,所以这里需要添加 :first

手册地址:http://www.w3school.com.cn/jquery/selector_first.asp

2.循环遍历文件上传

blob.png

HTML代码

<div class="addfiles">
<a class="addfile"/>添加</a>
<input type="file" name="file[]" id="" value="" class="contractfile" accept="image/*"/>
</div>
<script>
$(".addfile").click(function(){//1
//$(".addfile").unbind('click').click(function(){//2
$(this).parent('.addfiles').append($(".contractfile:first").clone(true));
});
</script>

具体做法是,当点击添加的时候,那么所有的上传文件按钮都会新增一个,所以这里需要改动的是点击之后查询父元素,然后再克隆一个

需要注意的是,如果是表格遍历循环那种,建议第二种写法。

如果有更好的写法,请留言告诉我。谢谢



留言不了
#166

   留言不了     2016-05-30 01:32    Win 7      湖北省武汉市

留言不了

admin

   admin     05-31 21:15    回复 @留言不了 中说到:

已经修复,因为更换数据库是5.6不设置默认值不让写入数据的

虫虫学车
#165

   虫虫学车     2016-05-24 14:24    Win 7      广东省深圳市

halo,你好吗

admin

   admin     05-24 23:18    回复 @虫虫学车 中说到:

欢迎来访

昵称
邮箱
域名
  记住 通知博主
验证码

  程序相关

站点版本:青春博客-V 2.1.0

开源版本:青春博客-Beta v2.0

 下载  在线支付  在线工具  在线音乐

  随机文章