<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>
动态添加的元素加layui上传事件
最新推荐文章于 2022-07-14 16:01:01 发布