动态添加的元素加layui上传事件

<link href="~/Scripts/kit_admin/plugins/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/kit_admin/plugins/layui/layui.all.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<form id="maindiv" style="margin-top:70px;">
    <div id="contentdiv">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>上传多张图片</legend>
        </fieldset>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test">多图片上传</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图:
                <div class="layui-upload-list" id="demo"></div>
            </blockquote>
        </div>
    </div>
</form>
<input type="button" class="layui-btn" value="添加一个" "Add()">
<script>
    var sort = 1;
    layui.use(['form', 'upload'], function () {
        var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload;
        
        picupload("#test", "#demo")
        function picupload(id, pic) {
            upload.render({
                elem: id
                , url: '/Upload/UploadFiles'
                , multiple: true
                , before: function (obj) {
                    //预读本地文件示例,不支持ie8
                    obj.preview(function (index, file, result) {
                        $(pic).append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width:184px;height:135px">')
                    });
                }
                , done: function (res) {
                    //上传完毕
                }
            });
        }
        window.Add = function () {
            var recoder = $("#contentdiv").clone();
            recoder.find(".layui-btn").attr("id", "test" + sort + "");
            recoder.find(".layui-upload-list").attr("id", "demo" + sort + "");
            recoder.find(".layui-upload-list").empty();
            $("#maindiv").append(recoder);
            picupload("#test" + sort + "", "#demo" + sort + "")
            sort++;
        }
    })
 
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值