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

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));

    }

巴特西

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

最新文章

热门文章