thinkCMF图片上传选择已上传图片

Posted 2021-03-26 6min

1.找到上传图片的模板页面 webuploader.html  

在上传文件标签后面 添加   

<li class=""><a href="#explorer" data-toggle="tab" class="history">文件管理</a></li>

下边便签对应的展示容器中加上   

<div class="tab-pane" id="explorer">
                <input type="hidden" id="history_path" value="">
                <input type="hidden" id="history_view" value="">
                <div class="files-wrapper" style="height:270px; overflow-y:scroll;">
                    <ul id="files-container-history">
                        <div class="k" style="width:100%;height:10px;clear:both;"></div>
                    </ul>
                </div>
            </div>

图片选择样式稍微美化一下

#files-container-history{
        list-style:none;
        height:270px;
        overflow:scorll;
    }
    .uploaded{
        float:left;
        width:200px;
        height:100px;
        padding:5px;
        margin-top:10px;
        margin-left:10px;
        border:1px solid #ccc;
        overflow:hidden;
    }
    .selected{
        border:1px solid #00a1ff;
    }
    .uploaded img{width:100%;}
    .filename{
    position:relative; width:100%; height:20px; 
    margin-top:-20px; color:#fff; background-color:rgba(1,1,1,0.5);
    font-size:14px;}

添加异步取回已上传文件列表功能

//拉取图片
    var listEnd = false, isLoadingData = false, listIndex = 0, listSize = 10;
    $(‘.history‘).on(‘click‘,function(){    
        if($(‘#explorer ul li‘).length == 0){
            get_list();
        }
    });
    function get_list(){
        if(!listEnd && !isLoadingData) {
            isLoadingData = true;
            var url = "/user/admin_asset/listimage";
            $.ajax({
                type: "GET",
                url: url,
                dataType: "json",
                timeout : 10000,
                data: {
                    page: Math.ceil(listIndex/listSize),
                },
                success: function (json) {
                    try {
                        if (json.state == ‘SUCCESS‘) {
                            show_img(json.list);
                            listIndex += parseInt(json.list.length);
                            if(listIndex >= json.total) {
                                listEnd = true;
                            }
                            isLoadingData = false;
                        }
                    } catch (e) {
                        if(json.indexOf(‘ue_separate_ue‘) != -1) {
                            var list = json.split(r.responseText);
                            listIndex = parseInt(list.length);
                            listEnd = true;
                            isLoadingData = false;
                        }
                    }
                },
                error: function () {
                    isLoadingData = false;
                }
            });
        }
    }
    //显示图片
    function show_img(list){
        var str = ‘‘;
            for (i = 0; i < list.length; i++) {
                if(list[i] && list[i].file_path) {
                    str = str + ‘<li class="uploaded" data-path="‘ + list[i].file_path + ‘" data-view="/upload/‘ + list[i].file_path + ‘">‘                                        
                              + ‘<div><img src="/upload/‘ + list[i].file_path + ‘">‘
                              + ‘<div class="filename">‘ + list[i].filename + ‘</div></div></li>‘;

                }
            }
            $(‘#explorer ul .k‘).before(str);        
    }
    //滚动
    $(‘.files-wrapper‘).on(‘scroll‘, function(e){
        var scrollTop = $(this).scrollTop() + $(this).outerHeight(true);
        var ktop      = $(this).find(‘.k‘).offset().top;
        if(scrollTop >= ktop){
              get_list();
          } 
    });
    
    //选择
    $(‘#files-container-history‘).on(‘click‘,‘li‘,function(){
        $(this).addClass(‘selected‘).siblings().removeClass(‘selected‘);
        $(‘#history_path‘).val($(this).data(‘path‘));
        $(‘#history_view‘).val($(this).data(‘view‘));
    });

滚动加载更多，展示都有了，

修改文件选择后的回调处理

function get_selected_files() {
        
        var tab = $(".tab-content > div.active").attr(‘id‘);
        
        var files = [];

        var idPre = ‘id‘ + new Date().getTime();

        if (tab == ‘wrapper‘) {
            var number = jQuery(".filelist li").size();
            for (var i = 0; i < number; i++) {

                var file         = new Object();
                var $file        = jQuery(".filelist li").eq(i);
                file.id          = idPre + i;
                file.filepath    = $file.data("filepath");
                file.preview_url = $file.data("preview_url");//httpUrl+file.filepath;
                file.url         = $file.data("url");
                file.name        = $file.data("name");
                if (file.url == undefined) {
                    continue;
                } else {
                    files.push(file);
                }

            }
        }else if(tab == ‘explorer‘){
            if($(‘#history_path‘).val() == ‘‘){
                alert(‘请选择图片！‘);
                return false;
            }
            var file         = new Object();
            file.id          = "historyfile"+new Date().getTime();
            file.filepath    = $(‘#history_path‘).val();
            file.preview_url = $(‘#history_view‘).val();
            file.url         = $(‘#history_path‘).val();
            file.name        = "";
            files.push(file);
        }else{
            var file         = new Object();
            file.id          = idPre + ‘1‘;
            file.filepath    = jQuery("#info").val();
            file.preview_url = file.filepath;
            file.url         = file.filepath;
            file.name        = "";//jQuery(".filelist li .title").eq(i).html();
            files.push(file);
        }
        return files;
    }

2.后端添加获取listimage的功能

取个巧在user/controller下的资源管理中添加列出已上传图片

public function listimage()
    {
        $page   = $this->request->param(‘page‘);
        $join   = [
            [‘__USER__ u‘, ‘a.user_id = u.id‘]
        ];
        $total = Db::name(‘asset‘)->field(‘a.id,a.file_path,a.filename,a.create_time‘)
            ->alias(‘a‘)->join($join)
            ->count();
        $result = Db::name(‘asset‘)->field(‘a.id,a.file_path,a.filename,a.create_time‘)
            ->alias(‘a‘)->join($join)
            ->order(‘create_time‘, ‘DESC‘)
            ->paginate(10);
        $result = array(
            "state" => "SUCCESS",
            "list" => $result->items(),
            "total" => $total
        );
        die(json_encode($result));
    }