当前位置: 首页 > 工具软件 > Layui-Admin > 使用案例 >

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

卫嘉佑
2023-12-01
<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});
                }
            }
        });

 

 类似资料: