blog_tp6/view/sys/file_manager/database_picture.html

<style>
    #online {
        width: 100%;
        height: 224px;
        padding: 10px 0 0 0;
    }

    #online #imageList {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        margin-left: 20px;
    }

    #online ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #online li {
        float: left;
        display: block;
        list-style: none;
        padding: 0;
        width: 113px;
        height: 113px;
        margin: 0 0 9px 9px;
        background-color: #eee;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }

    #online li img {
        cursor: pointer;
    }

    #online li .icon {
        cursor: pointer;
        width: 113px;
        height: 113px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        border: 0;
        background-repeat: no-repeat;
    }

    #online li .icon:hover {
        width: 107px;
        height: 107px;
        border: 3px solid #1094fa;
    }

    #online li.selected .icon {
        background-image: url(/static/images/success.png);
        background-image: url(images/success.gif)\9;
        background-position: 75px 75px;
    }

    #online li.clearFloat {
        float: left;
        clear: both;
        display: block;
        width: 113px;
        height: 113px;
        margin: 0 0 9px 9px;
        padding: 0;
    }
</style>

<div class="cl mt-20" id="online">
    <div id="imageList">
        <ul class="list">
            <!-- <li>
                <img width="170" height="113" src="/storage/20220223/d5cc488e71c58bb072debe45ed06c6ad.jpg?noCache=1634567323"
                 _src="/storage/20220223/d5cc488e71c58bb072debe45ed06c6ad.jpg">
                <span class="icon"></span>
            </li>
             -->
            <li class="clearFloat"></li>
        </ul>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $.Huitab("#tab-img .tabBar span", "#tab-img .tabCon", "current", "click", "0");
        $(document).on("click", "#online li", function () {
            $("#online li").removeClass('selected');
            
            $(this).addClass('selected');
            
            img = $(this).children('img').attr('_src');
            
            $("#online_file").val(img);
        });
    });
    
    function onlinepicture() {
        let infoid = $("input[name='infoid']").val();
        let cjid = $("input[name='cjid']").val();

        $.ajax({
            url: '{:url("file_manager/queryList")}',
            type: 'POST',
            async: true,
            cache: false,
            data: JSON.stringify({
                infoid: infoid,
                cjid: cjid
            }),
            processData: false,
            contentType: 'application/json',
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    html_str = "";
                    res.list.forEach(element => {
                        html_str += '<li><img width="170" height="113" src="' + element.filepath + '?noCache=' + element.filetime + '"';
                        html_str += '_src="' + element.filepath + '" title="'+element.title+'">';
                        html_str += '<span class="icon"></span></li>';
                    });
                    $('ul.list').prepend(html_str);
                }
            }
        });
    }

    onlinepicture();
</script>