thinkphp接入kindeditor多图上传multiimage插件

kindeditor插件multiimage使用必须引入以下文件。

1、引入kindeditor样式文件和js文件。

<link href="__PUBLIC__/Kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__PUBLIC__/Kindeditor/kindeditor.js"></script>
<script type="text/javascript" src="__PUBLIC__/Kindeditor/lang/zh_CN.js"></script>

2、页面html代码。

<input style=" padding: 2px 5px; margin: 0 8px 0 0; " type="button" class="btn select_image4" value="上传图片" />
<ul class="up-load clearfix yb_zhuangxiuanli_add_upload"></ul>

3、初始化kindeditor调用multiimage插件。

<script language="javascript" type="text/javascript">
$(document).ready(function () {
  KindEditor.ready(function(K) {
var editor = K.editor({
uploadJson: '/File/uploadPicture?SaveUrl=3', // 这里是上传文件的方法。如果不是用mvc开发的，请更换成相应的方法。
allowFileManager: true
});
//图片上传4,添加装修案例的多图上传
K('.select_image4').click(function() { 
   editor.loadPlugin('multiimage', function() {
       editor.plugin.multiImageDialog({
           clickFn : function(urlList) {
            console.log(urlList);
               var div = K('.yb_zhuangxiuanli_add_upload');
               K.each(urlList, function(i, data) {
                   div.append(data.url);  //data.url是图片上传之后返回的url
               });                
               editor.hideDialog();
           }
       });
   });
});
   });

});
</script> 

4、thinkphp图片上传配置。

 /* 图片上传相关配置 */
    'PICTURE_UPLOAD' => array(
        'mimes'    => '', //允许上传的文件MiMe类型
        'maxSize'  => 2*1024*1024, //上传的文件大小限制 (0-不做限制)
        'exts'     => 'jpg,gif,png,jpeg', //允许上传的文件后缀
        'autoSub'  => true, //自动子目录保存文件
        'subName'  => array('date', 'Ymd'), //子目录创建方式，[0]-函数名，[1]-参数，多个参数使用数组
        'rootPath' => './Public/Upload/image/', //保存根路径
        'savePath' => '', //保存路径
        'saveName' => time(). rand(100000, 999999), //上传文件命名规则，[0]-函数名，[1]-参数，多个参数使用数组
        'saveExt'  => '', //文件保存后缀，空则使用原后缀
        'replace'  => false, //存在同名是否覆盖
        'hash'     => true, //是否生成hash编码
        'callback' => false, //检测文件是否存在回调函数，如果存在返回文件信息数组
    ), //图片上传相关配置（文件上传类配置）

    'PICTURE_UPLOAD_DRIVER'=>'local',
    //本地上传文件驱动配置
    'UPLOAD_LOCAL_CONFIG'=>array(),
    'UPLOAD_BCS_CONFIG'=>array(
        'AccessKey'=>'',
        'SecretKey'=>'',
        'bucket'=>'',
        'rename'=>false
    ),
    'UPLOAD_QINIU_CONFIG'=>array(
        'accessKey'=>'__ODsglZwwjRJNZHAu7vtcEf-zgIxdQAY-QqVrZD',
        'secrectKey'=>'Z9-RahGtXhKeTUYy9WCnLbQ98ZuZ_paiaoBjByKv',
        'bucket'=>'onethinktest',
        'domain'=>'onethinktest.u.qiniudn.com',
        'timeout'=>3600,
    ),

5、thinkphp控制器类方法。

public function uploadPicture(){
        /* 返回标准数据 */
        $return  = array('status' => 0, 'info' => '上传成功', 'data' => '');

        /* 调用文件上传组件上传文件 */
        $pic_driver = C('PICTURE_UPLOAD_DRIVER');

        $info = $this->imagesUpload(
            $_FILES,
            C('PICTURE_UPLOAD'),
            C('PICTURE_UPLOAD_DRIVER'),
            C("UPLOAD_{$pic_driver}_CONFIG")
        );

        if($info){
            $return['error'] = 0;
            $return['url'] = $info;
        } else {
            $return['status'] = 1;
        }
        /* 返回JSON数据 */
        $this->ajaxReturn($return);
    }
    /**
     * 文件上传
     * @param  array  $files   要上传的文件列表（通常是$_FILES数组）
     * @param  array  $setting 文件上传配置
     * @param  string $driver  上传驱动名称
     * @param  array  $config  上传驱动配置
     * @return array           文件上传成功后的信息
     */
    private function imagesUpload($files, $setting, $driver = 'Local', $config = null){
        /* 上传文件 */
        $Upload = new ThinkUpload($setting, $driver, $config);
        $info   = $Upload->upload($files);
        if($info){ //文件上传成功，记录文件信息
            foreach ($info as $key => &$value) {
                /* 已经存在文件记录 */
                if(isset($value['id']) && is_numeric($value['id'])){
                    continue;
                }
                /* 记录文件信息 */
                $url = substr($setting['rootPath'], 1).$value['savepath'].$value['savename']; //在模板里的url路径
            }
            return $url; //文件上传成功
        } else {
            return false;
        }
    }