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: none;
        clear: both;
        display: block;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }
</style>
<form id="form-uploadurlimg" method="post" action="" enctype="multipart/form-data">
    <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>
</form>

<script type="text/javascript">
    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>