php单图上传，多图上传，图片批量上传，图片异步上传Thinkphp整合kindeditor

之前php多图上传没用插件，所以走了不少弯路，现在看了一下kindeditor的多图上传，感觉多图上传非常容易，只需几行代码就搞定

一，多图上传

前端代码：

    <link rel="stylesheet" type="text/css" href="__EDITOR__/themes/default/default.css"/>    <script type="text/javascript" src="__EDITOR__/kindeditor.js"></script>    <script charset="utf-8" src="__EDITOR__/kindeditor-min.js"></script>    <script charset="utf-8" src="__EDITOR__/lang/zh_CN.js"></script>    <script>        KindEditor.ready(function(K) {            var editor = K.editor({                allowFileManager : true            });            K('#J_selectImage').click(function() {                editor.loadPlugin('multiimage', function() {                    editor.plugin.multiImageDialog({                        clickFn : function(urlList) {                            var div = K('#J_imageView');                            div.html('');                            K.each(urlList, function(i, data) {                                div.append('<img src="' + data.url + '">');                            });                            editor.hideDialog();                        }                    });                });            });        });    </script>     <input type="submit" class="btn btn-primary" id="J_selectImage" value="上传照片"/>

二，单图上传

单图上传和多图上传代码一样，只是调用的插件不一样，只要在多图代码里修改editor.loadPlugin函数里的插件名称和修改下一行的editor.plugin.imageDialog就能使用
前端代码：

    <script>        KindEditor.ready(function(K) {            var editor = K.editor({                allowFileManager : true            });            K('#J_selectImage').click(function() {                editor.loadPlugin('image', function() {                    editor.plugin.imageDialog({                    clickFn : function(url, title, width, height, border, align) {                        K('#url3').val(url);                        editor.hideDialog();                    }                    });                });            });        });    </script>     <input type="submit" class="btn btn-primary" id="J_selectImage" value="上传照片"/>

三，kindeditor多图上传 整合thinkphp

前端代码：

    <script>        KindEditor.ready(function(K) {            var editor = K.editor({                allowFileManager : true,                uploadJson:"{:U('upload')}",            });            K('#J_selectImage').click(function() {                editor.loadPlugin('multiimage', function() {                    editor.plugin.multiImageDialog({                        clickFn : function(urlList) {                            location.href="{:U('allocation')}";                            editor.hideDialog();                        }                    });                });            });        });    </script>

后端代码

    public function upload(){        if (IS_POST) {            $upload = new \Think\Upload();// 实例化上传类            $upload->maxSize   =     3145728 ;// 设置附件上传大小            $upload->exts      =    array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型            $upload->rootPath  =     './Uploads/Master/'; // 设置附件上传根目录            $upload->saveName = '';            $upload->autoSub   =    false;            $path='/Uploads/Master/';//设置上传目录            $file = $upload->upload();            if ($file) {                $file_url =__ROOT__.$path.$file['imgFile']['savepath'] . $file['imgFile']['savename'];//取得上传目录                echo json_encode(array('error' => 0, 'url' => $file_url));//返回的数据一定要是json            } else {                $this->error($upload->getError());//返回错误            }        }    }

四，代码分析

代码贴出来了，再来浅析一下，前端代码分为两部分

1. var editor = K.editor({})这里面放的是配置变量，可以自由改变它默认设置的参数，常见参数有
   ①imageSizeLimit 上传限制大小
   ②imageUploadLimit 上传限制数量
   ③uploadJson 文件上传处理地址
2. editor.loadPlugin(‘image’, function() {})这里边设置调用的插件，跟返回值

补充：配置文件在\editor\php\upload_json.php里边，可以按自所需来设置，也可以整合到thinkphp和其他框架里，整合方法大同小异，但返回的数据必须是json