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

拖拉机上的优雅罗

已于 2024-03-08 09:52:29 修改

阅读量1.8k

点赞数 8

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

于 2024-02-03 15:48:16 首次发布

本文链接：https://blog.csdn.net/qq_19591849/article/details/136008540

版权

layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

版本：layui-v2.4.5

引用的layui核心文件这些略过，直接上代码

单图上传

html代码

<div class="layui-form-item">
    <label class="layui-form-label">封面图</label>
    <div class="layui-input-block">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="upload">上传图片</button>
            <div class="layui-upload-list" style="height:100px;">
                <input type="hidden" name="img_path" id="img_input">
                <img class="layui-upload-img" id="img_show" src="{$info.image}">
            </div>
        </div>
    </div>
</div>

js代码

layui.use(['form', 'jquery', 'upload'], function () {
    var form = layui.form, $ = layui.jquery, upload = layui.upload;
        form.render();

   upload.render({
    elem: '#upload',
    url: '{:url("/common/upload")}',
    before: function (obj) {
        obj.preview(function (index, file, result) {
            $('#img_show').attr('src', result);
        });
        layer.msg('上传中', {icon: 16, time: 0});
    },
    done: function (res) {
        if (res.code !== 0) {
            return layer.msg('上传失败');
        }
        /*
        res示例,这是我自己后端的返回，你们可以自己定义返回结构和数据
        {
            "code": 0,
            "msg": "上传成功",
            "data": {
            "id": 1,
                "url": "https://111111.oss-cn-shanghai.aliyuncs.com/111111.png"
            }
        }
        */
        $('#img_input').val(res.data.id);
        layer.msg('上传成功');
    },
    error: function () {
        return layer.msg('上传失败');
    }
   });

});

效果：

多图上传

html代码

<div class="layui-form-item">
    <label class="layui-form-label">轮播图</label>
    <div class="layui-input-block">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="uploadD">上传图片</button>
            <div class="layui-upload-list">
                <input type="hidden" name="img_paths" value="{$info.images_id}" id="img_inputD">
                <div class="img_shows" style="height:100px;">
                    {foreach $info.images as $v}
                    <div class="img-box"><img class="layui-upload-img" data-id="{$v.id}" src="{$v.url}"><span data-id="{$v.id}" class="del">X</span></div>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
</div>

js代码

layui.use(['form', 'jquery', 'upload'], function () {
        var form = layui.form, $ = layui.jquery, upload = layui.upload;
        form.render();
upload.render({
            elem: '#uploadD',
            url: '{:url("/common/upload")}',
            before: function (obj) {
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res) {
                if (res.code !== 0) {
                    return layer.msg('上传失败');
                }
                var old = $('#img_inputD').val();
                var all = '';
                if (old == '') {
                    all = res.data.id;
                } else {
                    all = old+','+res.data.id;
                }
                $('#img_inputD').val(all);
                var html = '<div class="img-box"><img class="layui-upload-img" data-id="'+res.data.id+'" src="'+res.data.url+'"><span data-id="'+res.data.id+'" class="del">X</span></div>';
                $('.img_shows').append(html);
                layer.msg('上传成功');
            },
            error: function () {
                return layer.msg('上传失败');
            }
        });
        //删除多图上传的图片
        $(document).on('click', '.del', function () {
            var id = $(this).attr('data-id');
            var old = $('#img_inputD').val();
            var all = old.split(",");
            var index = all.indexOf(id);
            if (index > -1) {
                all.splice(index, 1);
            }
            var newall = all.toString();
            $('#img_inputD').val(newall);
            $(this).parent().remove();
        });
});

效果：

上传视频

html代码

<div class="layui-form-item">
        <label class="layui-form-label">视频</label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" id="uploadV">上传视频</button>
            <div id="video"><video width="320" height="240" controls><source src="{$info.text}" id="video_url" type="video/mp4"></video></div>
            <input type="hidden" name="text" id="text" value="{$info.text}">
        </div>
    </div>

js代码

layui.use(['upload', 'form'], function () {
 upload.render({
            elem: '#uploadV',
            url: '{:url("/common/upload")}',
            accept: 'video',
            before: function (obj) {
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res) {
                if (res.code !== 0) {
                    return layer.msg('上传失败');
                }
                $('#text').val(res.data.url);
                var html = '<video width="320" height="240" controls><source src="'+res.data.url+'" id="video_url" type="video/mp4"></video>';
                $('#video').html(html);
                layer.msg('上传成功');
            },
            error: function () {
                return layer.msg('上传失败');
            }
        });
});