完善图片上传-在线图片


后台可以上传图片的地方有两个

  1. 缩略图上传

    

ssss.png

   2.编辑器图片上传

    

QQ截图20161019143259.png

有时候经常会上传同一张图片 这样有点浪费服务器资源 所以想加一个已上传图片选择

我搜索了一下站内有人发过这么一篇文章

http://www.thinkcmf.com/topic/topic/index/id/639.html

但是要收钱 所以自己做了一个

下面是代码

(我用的thinkcmf 版本是  X2.2.0 其他版本请自己尝试)

Ⅰ  修改编辑器图片上传

 1. 打开 \public\js\ueditor\dialogs\image\image.html 24行

 会看到 

<!-- <span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
            <span class="tab" data-content-id="search"><var id="lang_tab_search"></var></span> -->


这里隐藏的 一个是在线图片管理 一个是图片搜索 这里吧把在线管理去掉注释即可

<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>


2. 打开  \application\Asset\Controller\UeditorController.class.php

加上两个函数

//列出图片
    private function _get_listimage(){
        $allowFiles = array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" ); //文件允许格式
        $listSize = 3000; //文件大小限制,单位KB
        $path = './'. C("UPLOADPATH"); //图片路径
                       
        $allowFiles = substr(str_replace(".", "|", join("", $allowFiles)), 1);

        /* 获取参数 */
        $size = isset($_GET['size']) ? htmlspecialchars($_GET['size']) : $listSize;
        $start = isset($_GET['start']) ? htmlspecialchars($_GET['start']) : 0;
        $end = $start + $size;

        /* 获取文件列表 */
        //$path = $_SERVER['DOCUMENT_ROOT'] . (substr($path, 0, 1) == "/" ? "":"/") . $path;
        //echo $path;
        $files = $this->getfiles($path, $allowFiles);
        if (!count($files)) {
            return json_encode(array(
                "state" => "no match file",
                "list" => array(),
                "start" => $start,
                "total" => count($files)
            ));
        }

        /* 获取指定范围的列表 */
        $len = count($files);
        for ($i = min($end, $len) - 1, $list = array(); $i < $len && $i >= 0 && $i >= $start; $i--){
            $list[] = $files[$i];
        }
        //倒序
        //for ($i = $end, $list = array(); $i < $len && $i < $end; $i++){
        //    $list[] = $files[$i];
        //}

        /* 返回数据 */
        $result = array(
            "state" => "SUCCESS",
            "list" => $list,
            "start" => $start,
            "total" => count($files)
        );

        return json_encode($result);
        //$this->ajaxReturn($result);
    }
    /**
     * 遍历获取目录下的指定类型的文件
     * @param $path
     * @param array $files
     * @return array
     */
    function getfiles($path, $allowFiles, &$files = array())
    {
        if (!is_dir($path)) return null;
        if(substr($path, strlen($path) - 1) != '/') $path .= '/';
        $handle = opendir($path);
        while (false !== ($file = readdir($handle))) {
            if ($file != '.' && $file != '..') {
                $path2 = $path . $file;
                if (is_dir($path2)) {
                    $this->getfiles($path2, $allowFiles, $files);
                } else {
                    if (preg_match("/\.(".$allowFiles.")$/i", $file)) {
                        $files[] = array(
                            'url'=> substr(SITE_PATH . $path2, strlen($_SERVER['DOCUMENT_ROOT'])),
                            'mtime'=> filemtime($path2)
                        );
                    }
                }
            }
        }
        return $files;
    }

然后修改80行为 $result = $this->_get_listimage();

到这里 编辑器部分已修改完毕

Ⅱ 修改缩略图上传

  1. 打开

  在<li data-tab="network-file"><a href="#network-file-tab" data-toggle="tab">网络文件</a></li>

下面添加一个li

<li data-tab="history-file"><a href="#history-file-tab" data-toggle="tab" class="history">已上传文件</a></li>

然后在

<div class="tab-pane" id="network-file-tab">
                请输入网络地址<br>
                <input type="text" name="info[filename]" style="width: 600px;" placeholder="http://" id="network-file-input">
            </div>

下面添加以下代码 用来显示已上传图片

<div class="tab-pane" id="history-file-tab">
                <div class="files-wrapper">
                    <ul id="files-container-history">
                        <div class="k" style="width:100%;height:1px;clear:both;"></div>
                    </ul>
                </div>
            </div>

然后修改 get_selected_files() 函数变成以下代码

function get_selected_files(){
        var tab = $("#uploader-tabs li.active").data('tab');
        var files= [];
        if(tab=='upload-file'){
            var $files=$('#files-container li.uploaded.selected');
            if($files.length==0){
                alert('请上传文件!');
                return false;
            }
            $files.each(function(){
                var $this=$(this);
                var url = $this.data('url');
                var preview_url = $this.data('preview_url');
                var filepath = $this.data('filepath');
                var name = $this.data('name');
                var id = $this.data('id');
                files.push({url:url,preview_url:preview_url,filepath:filepath,name:name,id:id});
            });
        }
        if(tab=='network-file'){
            var url=$('#network-file-input').val();
            if(url==''){
                alert('请填写文件地址!');
                return false;
            }
            var id = "networkfile"+new Date().getTime();
            files.push({url:url,preview_url:url,filepath:url,id:id});
        }
        if(tab == 'history-file'){
            if($('#files-container-history li.selected').length == 0){
                alert('请选择图片!');
                return false;
            }
            var id = "historyfile"+new Date().getTime(),
                url = $('#files-container-history li.selected').find('img').attr('src');
                files.push({url:url,preview_url:url,filepath:url,id:id});    
                console.log(files);
            }
        return files;    
    }

最底部的js代码修改为

var multi={$multi};
        var page = 0;
        var listEnd = false;
        var isLoadingData = false;
        var listIndex = 0;
        var listSize = 20;
        Wind.use('plupload',function(){
            var uploader = new plupload.Uploader({
                runtimes : 'html5,flash,silverlight,html4',
                browse_button : 'select-files', // you can pass an id...
                container: document.getElementById('files-container'), // ... or DOM Element itself
                url : "{:U('asset/asset/plupload')}",
                flash_swf_url : '../js/Moxie.swf',
                silverlight_xap_url : '../js/Moxie.xap',
                filters : {
                    max_file_size : '{$upload_max_filesize_mb}mb',
                    mime_types: [{$mime_type}]
                },
                multi_selection:{$multi},
                multipart_params:{
                    app:'{$app}'
                },
                init: {
                    PostInit: function() {
                    },

                    FilesAdded: function(up, files) {
                        plupload.each(files, function(file) {
                            var $newfile=$('\
                                    <li class="selected">\
                                        <div class="selected-icon-wrapper"><i class="fa fa-check-circle"></i></div>\
                                        <div class="upload-percent">0%</div>\
                                    </li>');
                            $newfile.attr('id',file.id);
                            $('#files-container').append($newfile);
                            $newfile.on('click',function(){
                                var $this=$(this);
                                $this.toggleClass('selected');
                            });
                        });
                        uploader.start();
                    },

                    UploadProgress: function(up, file) {
                        $('#'+file.id).find('.upload-percent').text(file.percent+"%");
                    },
                    
                    FileUploaded: function(up, file, response) {
                        var data = JSON.parse(response.response);
                        if(data.status==1){
                            if(!multi) {
                                $('#select-files').css('visibility','hidden');
                            }
                            var $img=$('<img/>');
                            $img.attr('src',data.url);
                            $('#'+file.id).addClass('uploaded')
                            .data('id',file.id)
                            .data('url',data.url)
                            .data('preview_url',data.preview_url)
                            .data('filepath',data.filepath)
                            .data('name',data.name)
                            .find('.upload-percent')
                            .html($img);
                        }else{
                            alert(data.message);
                            $('#'+file.id).remove();
                        }
                    },
                    
                    Error: function(up, err) {
                    }
                }
            });

            uploader.init();
            
        });
        $('.history').on('click',function(){    
            if($('#history-file-tab ul li').length == 0){
                get_list();
            }
        });
        //拉取图片
        function get_list(){
            if(!listEnd && !isLoadingData) {
                isLoadingData = true;
                var url = "{:U('Asset/Ueditor/upload',array('action'=>'listimage'))}";
                $.ajax({
                     type: "GET",
                     url: url,
                     dataType: "json",
                     timeout : 10000,
                      data: {
                            start:listIndex,
                            size: listSize
                        },
                    success: function (json) {
                        try {
                            if (json.state == 'SUCCESS') {
                                show_img(json.list);
                                listIndex = parseInt(json.start) + 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].url) {
                        str = str + '<li class="uploaded">'                                        
                                  + '<div class="selected-icon-wrapper">'
                                  + '<i class="fa fa-check-circle"></i></div>'
                                  + '<div class="upload-percent">'
                                  + '<img src="' + list[i].url + '"></div></li>';

                    }
                }
                $('#history-file-tab ul .k').before(str);        
        }
        //滚动
        $('#files-container-history').on('scroll', function(e){
              var scrollTop = $(this).scrollTop() + $(this).outerHeight(true);
              if(scrollTop >= $(this).find('.k').offset().top){
                  get_list();
              }
         });
        //选择
        $('#files-container-history').on('click','li',function(){
            $(this).addClass('selected').siblings().removeClass('selected');
        });

然后 修改下 css 

#files-container-history li {
    cursor: pointer;
}

到这里修改完毕 。

修改的比较匆忙 代码可能有点乱  仅供小菜鸟参考

有什么问题可以加我企鹅号 4631458

打赏

评论

暂时关闭,稍后恢复~
文档请看10遍以上!有问题可加QQ群!
发表话题

源素材推荐

提问必知

0.话题发布后没及时显示,请联系官方QQ群管理;
1.话题支持代码,qq截屏直接粘贴,和QQ群一样;
2.问题描述清,比如服务器版本,程序版本;
3.能上代码,就不用文字;
4.把问题发到话题后再发QQ群;
5.如果感觉回复者解答的不错,可以发红包!
6.多帮助别人也是对自己的锻炼!
7.付费讨论中只有提问者和付费用户才可以查看回复

积分规则

1.评论积分+1;每天最多10次奖励
2.发布话题积分+1;每天最多5次奖励
3.垃圾评论积分-500;
4.黄色,暴力,违反我国法律评论直接封号


ThinkCMF 8.0.0发布啦!祝大家节日快乐! 立即体验!