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

最新推荐文章于 2025-05-08 19:02:19 发布

转载最新推荐文章于 2025-05-08 19:02:19 发布 · 2.6k 阅读

杂七杂八专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍如何利用layui框架和jQuery实现网页上的多张图片上传功能，包括代码示例和具体实现步骤，适用于前端开发人员学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>