layui-admin 单图、视频、多图上传

<div class="layui-form-item">
    <label for="" class="layui-form-label">缩略图</label>
    <div class="layui-input-block">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="uploadPic">上传</button>
            <div class="layui-upload-list">
                <ul id="layui-upload-box" class="layui-clear"></ul>
                <input type="hidden" name="image_url" id="image_url" value=""/>
            </div>
        </div>
    </div>
</div>
<div class="layui-form-item">
    <label for="" class="layui-form-label">视频</label>
    <div class="layui-input-block">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="uploadVideo">上传</button>
            <div class="layui-upload-list">
                <ul id="layui-upload-box-video" class="layui-clear"></ul>
                <input type="hidden" name="video_url" id="video_url" value=""/>
            </div>
        </div>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">组图:</label>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="uploadMultiImage">上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            <div class="layui-upload-list" id="div-slide-show">
                <ul id="layui-upload-box-multi" class="layui-clear"></ul>
                <input type="hidden" name="multiImage" class="multiImage" value="">
            </div>
        </blockquote>
    </div>
</div>
var upload = layui.upload;
        upload.render({
            elem: '#uploadPic'
            , url: '{{ route("uploadImg") }}'
            , multiple: false
            , data: {"_token": "{{ csrf_token() }}"}
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#layui-upload-box').html('<li><img src="' + result + '" /><p>上传中</p></li>');
                });
            }
            , done: function (res) {
                if (res.code == 0) {
                    $('#image_url').val(res.url);
                    $('#layui-upload-box li p').text('上传成功');
                    return layer.msg(res.msg, {icon: 6});
                }
                return layer.msg(res.msg, {icon: 5});
            }
        });

        var uploadVideo = layui.upload;
        uploadVideo.render({
            accept: 'file',
            elem: '#uploadVideo'
            , url: '{{ route("uploadVideo") }}'
            , multiple: false
            , data: {"_token": "{{ csrf_token() }}"}
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#layui-upload-box-video').html('<li><p>上传中</p></li>');
                });
            }
            , done: function (res) {
                if (res.code == 0) {
                    $('#video_url').val(res.url);
                    $('#layui-upload-box-video li p').text('上传成功');
                    return layer.msg(res.msg, {icon: 6});
                }
                return layer.msg(res.msg, {icon: 5});
            }
        });

        var uploadMultiImage = layui.upload;
        uploadMultiImage.render({
            elem: '#uploadMultiImage'
            , url: '{{ route("uploadImg") }}'
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    $('#layui-upload-box-multi').append('<li><i onclick="delMultiImages($(this))">x</i><img data-original="'
                        + result + '" src="' + result + '" alt="' + file.name + '" title="点击删除" class="layui-upload-img" />' +
                        '<p>上传中</p></li>');
                });
            }
            , done: function (res) {
                if (res.code == 0) {
                    multiImages.push(res.url);
                    $('#layui-upload-box-multi li p').text('上传成功');
                    $('.multiImage').val(multiImages);
                    if ($('#layui-upload-box-multi').length!=0) {
                        var image2 = new Viewer(document.getElementById('layui-upload-box-multi'),{
                            navbar: false,
                            url: 'data-original',
                            show: function (){
                                image2.update();
                            }
                        });
                    }
                } else {
                    //提示信息
                    return layer.msg(res.msg, {icon: 5});
                }
            }
        });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
layui-layout-admin 是一款基于 layui 框架的后台管理系统模板,可以帮助开发者快速搭建一个美观、易用的后台管理系统。 使用 layui-layout-admin 首先需要引入 layui 框架和 layui-layout-admin 模板文件,然后按照对应的 HTML 结构和 CSS 样式编写页面即可。 以下是一个简单的示例代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后台管理系统</title> <!-- 引入 layui 框架 --> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <!-- 布局容器 --> <div class="layui-layout layui-layout-admin"> <!-- 头部区域 --> <div class="layui-header"> <div class="layui-logo">后台管理系统</div> <!-- 头部右侧菜单 --> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;">用户名</a> <dl class="layui-nav-child"> <dd><a href="">个人信息</a></dd> <dd><a href="">退出登录</a></dd> </dl> </li> </ul> </div> <!-- 左侧菜单栏 --> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">控制台</a> <dl class="layui-nav-child"> <dd><a href="">控制台首页</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">用户管理</a> <dl class="layui-nav-child"> <dd><a href="">用户列表</a></dd> <dd><a href="">添加用户</a></dd> </dl> </li> </ul> </div> </div> <!-- 主体内容区域 --> <div class="layui-body"> <div class="layui-tab" lay-filter="demo"> <ul class="layui-tab-title"> <li class="layui-this">控制台</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">欢迎使用后台管理系统</div> </div> </div> </div> <!-- 底部信息 --> <div class="layui-footer"> © 后台管理系统 </div> </div> <!-- 引入 layui-layout-admin 模板文件 --> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.js"></script> </body> </html> ``` 需要注意的是,layui-layout-admin 依赖于 layui 框架,因此需要先引入 layui 框架的 CSS 和 JS 文件。同时,layui-layout-admin 还依赖于 jQuery 库,因此需要在引入 layui-layout-admin 之前先引入 jQuery 库。 除了以上示例代码中的基本结构外,layui-layout-admin 还提供了很多其他的组件和功能,可以根据具体需求进行使用。具体使用方法可以参考 layui-layout-admin 的官方文档。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值