【layui】checkbox、多图片上传、视频上传、layer.open弹窗、admin.popup的使用

网页多媒体元素处理：图片与视频上传及复选框管理

原创

已于 2024-11-14 09:41:33 修改 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

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

本文展示了如何使用layui框架实现网页中的多图片上传、视频上传功能，以及复选框的选择管理。通过HTML结构定义和JavaScript编辑，实现了文件上传的交互逻辑，包括上传前的提示、上传后的预览与删除，以及复选框的验证规则。同时，提供了查看视频的弹窗功能。

一、多图片上传

引入 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'