【layui】checkbox、多图片上传、视频上传、layer.open弹窗

Minions_Fatman

已于 2024-06-11 13:38:20 修改

阅读量869

点赞数

分类专栏： layui 文章标签： layui javascript 前端

于 2023-07-13 11:07:59 首次发布

本文链接：https://blog.csdn.net/Minions_Fatman/article/details/131697846

版权

layui 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、多图片上传

引入 CSS 定义样式

<style>
.layui-upload-list{ margin: 10px 0 0; }
.edit_goods .layui-upload-img { width: 110px;height: 110px;margin: 0 10px 10px 0;display: inline-block;position: relative; }
.edit_goods .layui-upload-img img{ width: 100%;height: 100%; background: #e6e6e6; object-fit: contain; }
.edit_goods .layui-upload-img .handle{ position: absolute;bottom: 0;left: 0;width: 100%; color: #fff;cursor: pointer;
background-color: rgba(0,0,0,0.4);text-align: center; }
</style>

定义 HTML 结构

<div class="layui-form-item">
    <label class="layui-form-label">产品图片</label>
    <div class="layui-input-block">
        <div class="layui-upload">
            <div style="overflow: hidden;">
                <div class="layui-input-inline" style="width: auto;">
                    <button type="button" class="layui-btn" id="multi_img_uplaod">多图片上传</button> 
                </div>
                <!-- <div class="layui-input-inline" style="width: auto;height: 38px;line-height: 38px;"><p>（建议图片尺寸为750px * 750px）</p></div> -->
            </div>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：<div class="layui-upload-list" id="multi_img_uplaod_btn"></div>
            </blockquote>
        </div>
    </div>
</div>

引入 JS 编辑

<script>
layui.data.sendParams = function(params){
// console.log(params);
layui.use(['admin','form','upload','layedit','view','setter','laytpl','layer'], function(){
    var $ = layui.$
        ,admin = layui.admin
        ,setter = layui.setter
        ,layedit = layui.layedit
        ,element = layui.element
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,laytpl = layui.laytpl
        ,upload = layui.upload
        ,router = layui.router();

    element.render();
    form.render(null, 'edit_goods');
    if(params.id){
        admin.req({
            url: layui.setter.baseUrl+'admin/goods/goodsEdit', //实际使用请改成服务端真实接口
            data: {id: params.id},
            type:'get',
            success: function(res){
                if(res.code==1){
                    if(res.data.info.goods_img.length!=0){
                        var imgList = '';
                        for(var i in res.data.info.goods_img){
                            imgList+='<div class="layui-upload-img">';
                            imgList+='<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>';
                            imgList+='<img src='+ res.data.info.goods_img[i] +' οnclick="see_img(this)">';
                            imgList+='<input type="text" name="goods_imgs[]" value="'+res.data.info.goods_img[i]+'" class="layui-input" style="display:none;">';
                            imgList+='</div>';
                        }
                        $('#multi_img_uplaod_btn').append(imgList);
                       //获取id下的div元素个数
                         let uploadedCount = $('#multi_img_uplaod_btn').children('.layui-upload-img').length;
                         if (uploadedCount >= 3) {
                             // 如果已上传图片数量达到三张，禁用上传按钮或其他相关操作
                             $('#multi_img_uplaod').addClass('layui-btn-disabled').prop('disabled', true); // 禁用上传按钮
                         }
                    }
                    form.render();
                }else{
                    layer.msg(res.msg);
                }
            }
        });
    }
 
    // 多图片上传
    upload.render({
        elem: '#multi_img_uplaod'
        ,url: layui.setter.baseUrl+'admin/upload/upload'
        ,size: 1024 * 2 ,accept: 'images'
        ,multiple: true
        ,before: function(obj){
            layer.msg('图片上传中...', { icon: 16, shade: 0.01, time: 0 });
        }
        ,done: function(res){
            layer.close(layer.msg());//关闭上传提示窗口
            // 上传完毕
            var html='<div class="layui-upload-img">';
                html+='<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>';
                html+='<img src='+res.data+' οnclick="see_img(this)">';
                html+='<input type="text" name="goods_imgs[]" value="'+res.data+'" class="layui-input" style="display:none;">';
                html+='</div>';
            $('#multi_img_uplaod_btn').append(html);
            //获取id下的div元素个数
             let uploadedCount = $('#multi_img_uplaod_btn').children('.layui-upload-img').length;
             if (uploadedCount >= 3) {
                 // 如果已上传图片数量达到三张，禁用上传按钮或其他相关操作
                 $('#multi_img_uplaod').addClass('layui-btn-disabled').prop('disabled', true); // 禁用上传按钮
             }
             form.render();
        }
    });
    // 删除
    $("#multi_img_uplaod_btn").on("click", ".layui-upload-img .handle", function(event){
        $(this).parent('.layui-upload-img').remove();
        //获取id下的div元素个数
         let uploadedCount = $('#multi_img_uplaod_btn').children('.layui-upload-img').length;
         if (uploadedCount >= 3) {
             // 如果已上传图片数量达到三张，禁用上传按钮或其他相关操作
             $('#multi_img_uplaod').addClass('layui-btn-disabled').prop('disabled', true); // 禁用上传按钮
         } else{
             $('#multi_img_uplaod').removeClass('layui-btn-disabled').prop('disabled', false); // 禁用上传按钮
         }
         form.render();
    });
   // 查看图片
   window.see_img=function(that){
       layer.photos({
           photos: {data: [{ src: $(that).attr('src') }]},
           shade: 0.5,closeBtn: 1,anim: 5
       });
   };


});
}
</script>

二、视频上传

定义 HTML 结构

<div class="layui-form-item" id="douya_video" style="margin-bottom: 5px;">
   <label class="layui-form-label">产品视频</label>
   <div class="layui-input-block">
       <div class="layui-input-inline">
           <input name="goods_vedio" id="goods_img2" placeholder="视频地址" class="layui-input">
       </div>
       <div class="layui-input-inline layui-btn-container" style="width: auto;margin-right: 0;">
           <button type="button" class="layui-btn" id="LAY_videoUpload" style="margin-bottom: 0;">
           <i class="layui-icon">&#xe67c;</i>上传视频</button>
           <a class="layui-btn layui-btn-primary" onclick="see_video();"  style="margin-bottom:0;margin-right: 0;">查看视频</a>
       </div>
       <p style="padding: 9px 0;">（建议视频大小在5M以下）</p>
   </div>
</div>

引入 JS 编辑

<script>
layui.data.sendParams = function(params){
// console.log(params);
layui.use(['admin','form','upload','layedit','view','setter','laytpl','layer'], function(){
    var $ = layui.$
        ,admin = layui.admin
        ,setter = layui.setter
        ,layedit = layui.layedit
        ,element = layui.element
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,laytpl = layui.laytpl
        ,upload = layui.upload
        ,router = layui.router();

    element.render();
    form.render(null, 'edit_goods');
   
    // 查看视频    
    window.see_video=function(){
        var url = $('#goods_img2').val();
        if(!url){
            layer.msg("请上传视频");
            return
        }
        var html = '<div>\
                <video width="500" height="500" controls autobuffer autoplay="autoplay" style="vertical-align: middle;">\
                    <source src="'+url+'" type="video/mp4" />\
                </video>\
            </div>';
        //弹出层
        layer.open({
            title: "视频预览", type: 1, skin: 'layui-layer-demo', //样式类名
            anim: 2, area: ['500px', '543px'], shadeClose: true, //开启遮罩关闭
            content: html
        })
        return false;
    };
    //视频上传
    upload.render({
        elem: '#LAY_videoUpload'
        ,url: layui.setter.baseUrl+'admin/upload/upload'
        ,accept: 'file'
        ,before: function(obj){
            layer.msg('上传中...', { icon: 16, shade: 0.01, time: 0 });
        }
        ,done: function(res){
            layer.close(layer.msg());//关闭上传提示窗口
            if(res.code==1){
                //上传完毕
                $('#goods_img2').val(res.data);
            }else{
                layer.msg(res.msg, {icon: 5,anim: 6,shade:0.5,time: 1000});
            }
        }
        ,error: function(err){
            //请求异常回调
            console.log(err)
        }
    });
    

});
}
</script>

三、checkbox复选框

定义 HTML 结构

<div id="layui_item"></div>
    <script id="layui_script" type="text/html">
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label">所在类目</label>
            <div class="layui-input-block" id="catids_1">
                {{#  layui.each(d.cat1, function(index, item){ }}
                <input type="checkbox" data-index="catid1_{{index}}" value="{{item.id}}" title="{{item.name}}" lay-skin="primary" lay-verify="checkbox">
                {{#  }); }}
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label">色彩光效</label>
            <div class="layui-input-block" id="catids_2">
                {{#  layui.each(d.cat2, function(index, item){ }}
                <input type="checkbox" data-index="catid2_{{index}}" value="{{item.id}}" title="{{item.name}}" lay-skin="primary" lay-verify="checkbox">
                {{#  }); }}
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label">炸裂特效</label>
            <div class="layui-input-block">
                {{#  layui.each(d.cat3, function(index, item){ }}
                <input type="radio" name="cat_id_3" value="{{item.id}}" title="{{item.name}}" lay-verify="required">
                {{#  }); }}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">声音特效</label>
            <div class="layui-input-block">
                {{#  layui.each(d.cat4, function(index, item){ }}
                <input type="radio" name="cat_id_4" value="{{item.id}}" title="{{item.name}}" lay-verify="required">
                {{#  }); }}
            </div>
        </div>
    </script>

引入 JS 编辑

<script>
layui.data.sendParams = function(params){
// console.log(params);
layui.use(['admin','form','upload','layedit','view','setter','laytpl','layer'], function(){
    var $ = layui.$
        ,admin = layui.admin
        ,setter = layui.setter
        ,layedit = layui.layedit
        ,element = layui.element
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,laytpl = layui.laytpl
        ,upload = layui.upload
        ,router = layui.router();

    element.render();
    form.render(null, 'edit_goods');
    let cat1=[],cat2=[];
    if(params.id){
        admin.req({
            url: layui.setter.baseUrl+'admin/goods/goodsEdit', //实际使用请改成服务端真实接口
            data: {id: params.id},
            type:'get',
            success: function(res){
                if(res.code==1){
                    // 复选框
                    var data_item = res.data.cate;
                    var getTpl_item = layui_script.innerHTML
                        ,view_item = document.getElementById('layui_item');
                    laytpl(getTpl_item).render(data_item, function(html){
                        view_item.innerHTML = html;
                    });
                    cat1=res.data.info.cat_id_1;
                    cat2=res.data.info.cat_id_2;
                    form.val('edit_goods',{
                        'cat_id_3': res.data.info.cat_id_3.toString(),
                        'cat_id_4': res.data.info.cat_id_4.toString(),
                    });
                    res.data.cate.cat1.forEach(function (item,index) {
                        res.data.info.cat_id_1.forEach(function (jtem,jndex) {
                            if(jtem==item.id){
                                $('input[type="checkbox"][data-index=catid1_' + index + ']').prop('checked', true);
                            }
                        });
                    });
                    res.data.cate.cat2.forEach(function (item,index) {
                        res.data.info.cat_id_2.forEach(function (jtem,jndex) {
                            if(jtem==item.id){
                                $('input[type="checkbox"][data-index=catid2_' + index + ']').prop('checked', true); 
                            }
                        });
                    });
                    form.render();
                }else{
                    layer.msg(res.msg);
                }
            }
        });
    }
    //自定义验证规则
    form.verify({
        checkbox:function (value, item) {
            if($('#catids_1 input:checked').length==0){
                return "请选择产品所在类目";
            }
            if($('#catids_2 input:checked').length==0){
                return "请选择产品燃放色彩光效";
            }
        }
    });
   
});
}
</script>

在这里插入图片描述

四、layer.open弹窗

内容弹窗

<style>
.ogoods_img{ padding: 10px; box-sizing: border-box; }
.ogoods_img img{ width: 50px; height: 50px; border-radius: 10px; }
.fbc{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.ogoods_ul{ padding: 10px; }
.ogoods_ul>li{ display: inline-block; width: 48%; margin-bottom: 10px; border: 2px solid #f8f8f8; }
.ogoods_ul>li:nth-child(2n){ margin-left: 10px; }
.ogoods_txt{ background: #f4f4f4; padding: 8px 5px; }
.ogoods_txt h3{ width: 50%; font-size: 12px; }
</style>
let glist='';
for(var i in data.goods){
    if(!data.goods[i].image) data.goods[i].image='/static/admin/src/style/res/img1.png';
    else data.goods[i].image=data.goods[i].image;
    glist+='<li>\
        <div class="ogoods_img fbc">\
            <img src="'+data.goods[i].image+'" height="100%" alt="">\
            <div style="width: 78%;">\
                <p style="color: #111111; font-size: 16px;">'+data.goods[i].revert+'</p>\
                <p style="color: #999;">订购箱数：'+data.goods[i].num+'</p>\
            </div>\
        </div>\
        <div class="ogoods_txt fbc">\
            <h3 style="width: 60%;padding-bottom: 4px;">规格含量:'+data.goods[i].spec+data.goods[i].content+'</h3>\
            <h3 style="width: 40%;padding-bottom: 4px;">产品分类:'+data.goods[i].cate+'</h3>\
            <h3>该价位箱规:'+data.goods[i].box+'</h3>\
            <h3>结构:'+data.goods[i].struct+'</h3>\
        </div>\
    </li>';
}
let html='<div id="openGoods"><ul class="ogoods_ul">'+glist+'</ul></div>';
layer.open({
    type: 1, title: '查看商品', skin: 'layui-layer-demo', //样式类名
    area: ['600px', '600px'], //宽高
    anim: 2, shadeClose: true, //开启遮罩关闭
    content: html
});

textarea带有文本框的弹窗

layer.open({
    type: 1,btn:["确定","取消"],title: '负责人信息备注',skin: 'layui-layer-prompt',area: ['300px', '230px']
    ,content: '<div><textarea name="remark" id="remark" autocomplete="off" placeholder="请输入备注" class="layui-textarea"></textarea></div>'
    ,yes: function(index, layero){
         if(!$(layero).find("#remark").val()){
              layer.msg('请输入备注', {icon: 5,anim: 6,shade:0.5,time: 1000});
              return
          }
          admin.req({
              url: layui.setter.baseUrl+'admin/test/test',
              data:{id:obj.data.id,desc:$(layero).find("#remark").val()},
              type:'get',
              success: function(res){
                  if(res.code==1){
                      layer.msg(res.msg , {icon: 1,time: 1000} , function(){
                          layer.close(index); //执行关闭
                          layui.table.reload('goods_list'); //重载表格
                      });
                  }else{
                      layer.msg(res.msg, {icon: 5,anim: 6,shade:0.5,time: 1000});
                  }
              }
          });
    }
});

在这里插入图片描述

Minions_Fatman

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【layui】checkbox、多图片上传、视频上传、layer.open弹窗

多图片上传引入 CSS 定义样式<style>.layui-upload-list{ margin: 10px 0 0; }.edit_goods .layui-upload-img { width: 110px;height: 110px;margin: 0 10px 10px 0;display: inline-block;position: relative; }.edit_goods .layui-upload-img img{ width: 100%;height: 10
复制链接

扫一扫