<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>新增</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">

    <style>
        .head{
            width: 100%;
            height: 100px;
            background: url("/images/step.png") no-repeat center center;
            background-size: cover;

        }
    </style>
</head>
<body>

<div class="demoA">
    <div class="head"></div>

    <hr class="border-gray-400" style="background-color: #0C0C0C"></hr>
    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
        <i class="layui-icon layui-icon-upload"></i> 单图片上传
    </button>
    <div style="width: 132px;">
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
            <div id="ID-upload-demo-text"></div>
        </div>
        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
            <div class="layui-progress-bar" lay-percent=""></div>
        </div>
    </div>
    <div class="layui-upload-drag" style="display: block;margin-top: 20px" id="ID-upload-demo-drag">
        <i class="layui-icon layui-icon-upload"></i>
        <div>点击上传，或将文件拖拽到此处</div>
        <div class="layui-hide" id="ID-upload-demo-preview">
            <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
        </div>
    </div>


</div>

<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
<script>
    layui.use([ 'form', 'step'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step,
            upload= layui.upload,
            element = layui.element;

        // 文件上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: AjaxUtil.ctx+'/bugFile/uploadfile',
            before:function (obj) {
                obj.preview(function (index,file,result) {
                    $('#ID-upload-demo-img').attr('src',result);// 图片链接（base64）

                });
                element.progress('filter-demo','0%');// 进度条复位
                layer.msg('上传中',{icon:16,time:0});
            },
            done:function (res) {
                if (res.code >0){
                    return layer.msg('上传失败！',{icon:2});
                }
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态

            },
            error: function(){
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function(n, elem, e){
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        upload.render({
            elem: '#ID-upload-demo-drag',
            url: AjaxUtil.ctx+'/bugFile/uploadfile', // 实际使用时改成您自己的上传接口即可。
            done: function(res){
                layer.msg('上传成功');
                $('#ID-upload-demo-preview').removeClass('layui-hide')
                    .find('img').attr('src', res.files.file);
                console.log(res)
            }
        });

    })
</script>
</body>
</html>