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

1.前言

最近遇到一个有关layui的问题，一个项目对应多次成果交接记录，一对多的关系，每次成果交接需要上传附件，所以简单点来说，就是动态添加上传input。先来一张做好的效果图。

image.png

点击添加一个，可以动态添加一个上传元素。如何做到每个上传元素都是好用的呢？其实关键就是给upload.render动态赋值就可以了。请看代码。

<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="添加一个" onclick="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>

Study hard and make progress every day.

更多学习资料请关注"爱游戏爱编程"。

爱游戏爱编程.jpg