php和javascript的kindEditor和plupload图片路径配置

1.kindEditor

<1>进行相应文件下载并进行导入

css:

<link rel="stylesheet" href="/asset/other/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="/asset/other/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/asset/other/kindeditor/lang/zh-CN.js"></script>

js

<script>
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="kindarea"]', {
            allowFileManager : true
        });
    });
</script>

html
注意此处name和上方js的配置名称相同

<textarea name="kindarea" style="width:800px;height:400px;visibility:hidden;">KindEditor</textarea>

本来以为到此收工，谁知道里面上传图片的功能怎么都不行。。。。
于是找了好久终于发现了/kindeditor/php/upload_json.php文件需要改(我使用的是thinkphp5)：

$php_url =  '/';

//文件保存目录路径
$save_path =  '../../../../uploads/';
//文件保存目录URL
$save_url =  $php_url.'uploads/';

这里解释一下，实际上，我在public目录下创建了uploads目录，在tp5下，默认public目录即为根目录;
当前upload_json.php文件目录为/public/assets/kindeditor/php/upload_json.php，所以相对路径public层是upload_json.php的上4层，保存的网页路径为/uploads/

文件实际保存路径	当前路径	相对路径
/public/uploads	/public/assets/kindeditor/php/upload_json.php	../../../../uploads/

然后讲下plupload：
同样要先下载
配置js:

<script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<script type="text/javascript" src="/asset/other/plupload/plupload.full.min.js"></script>

逻辑js:

<script type="text/javascript">
    var uploader = new plupload.Uploader({ //创建实例的构造方法
        runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序
        browse_button: 'upload_btn', // 上传按钮,注意和自己的id设为相同
        url: "xxx", //远程上传地址(要php，需进行处理)
        flash_swf_url: 'plupload/Moxie.swf', //flash文件地址，这个不用管
        silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地址，这个不用管
        filters: {
            max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
            mime_types: [ //允许文件上传类型
                {
                    title: "files",
                    extensions: "jpg,png,gif,ico"
                }
            ]
        },
        multi_selection: true, //true:ctrl多文件上传, false 单文件上传
        init: {
            FilesAdded: function(up, files) { //文件上传前
                var reader = new FileReader();
                reader.readAsDataURL(files[0].getNative());
                reader.onload = (function (e) {
                    var image = new Image();
                    image.src = e.target.result;
                    image.onload = function () {
                        //限制图片宽小于800,高小于1000
                        if (this.width <=800 && this.height < 1000) {
                            var li = '';
                            plupload.each(files, function(file) { //遍历文件
                                li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
                            });
                            $("#ul_pics").append(li);
                            uploader.start();
                        } else {
                            alert("您选择的图片尺寸过大！请裁剪后再上传。");
                        }
                    };
                });

            },
            FilesRemoved:function(up,files){
                plupload.each(files, function(file) { //遍历文件
                    $('#'+file.id).remove();
                    deleteFile(src);
                });
            },
            UploadProgress: function(up, file) { //上传中，显示进度条

                var percent = file.percent;
                $("#progress").html(percent);
                $("#" + file.id).find('.bar').css({
                    "width": percent + "%"
                });
                $("#" + file.id).find(".percent").text(percent + "%");

            },
            FileUploaded: function(up, file, info) { //文件上传成功的时候触发
                var data = eval("(" + info.response + ")");
                $("#" + file.id).attr("value",data.path);
                $("#" + file.id).html("<div class='img'><img align='middle' src='" + data.pic + "' /><img onclick='remove(this)' src='/asset/img/close.png' style='position: relative;width:30px;height: 30px;top: -50px;left: -20px;'/></div>");

            },
            Error: function(up, err) { //上传出错的时候触发
                alert(err.message);
            }
        }


    });
    uploader.init();

    var src = null;
    function remove(obj){
        var id = $(obj).parent().parent().attr("id");
        src = $(obj).parent().parent().attr("value");

        var ul_pics = document.getElementById("ul_pics");
        var childs = ul_pics.childNodes;
        for(var i = childs.length - 1; i >= 0; i--) {
            if(childs[i].getAttribute("id")==id){
                uploader.splice(i,1);
                break;
            }
        }
    }

    function  deleteFile(name)
    {
        $.ajax({
            type: 'POST',
            data: {name: name},
            url: 'xx',//删除处理路径
            success: function (data) {
                var obj = eval('(' + data + ')');
                alert(obj.msg);
            }
        });
    }
</script>

上传处理：

$typeArr = array("jpg", "png", "gif","ico");
//注意此路径为上传路径
        $path = "uploads/";
//上传路径

        if (isset($_POST)) {
            $name = $_FILES['file']['name'];
            $size = $_FILES['file']['size'];
            $name_tmp = $_FILES['file']['tmp_name'];
            if (empty($name)) {
                echo json_encode(array("error" => "您还未选择图片"));
                exit ;
            }
            $type = strtolower(substr(strrchr($name, '.'), 1));
            //获取文件类型

            if (!in_array($type, $typeArr)) {
                echo json_encode(array("error" => "清上传jpg,png或gif类型的图片！"));
                exit ;
            }

            $pic_name = time() . rand(10000, 99999) . "." . $type;
            //图片名称
            $pic_url = $path . $pic_name;
            //上传后图片路径+名称
            if (move_uploaded_file($name_tmp, $pic_url)) {//临时文件转移到目标文件夹
                echo json_encode(array("error" => "0", "pic" => $this->request->root(true).'/'.$path.'/'.$pic_name, "name" => $pic_name,"path"=>$path.'/'.$pic_name));
            } else {
                echo json_encode(array("error" => "上传有误，清检查服务器配置！"));
            }
        }

删除处理：

$filename = $_POST['name'];
        unlink ( $filename);
        return getResponse(1, "删除成功！");

function getResponse($code,$msg){
    $response['code']=$code;
    $response['msg']=$msg;
    return json_encode($response);
}

html:

<button   id="upload_btn">上传</button>
<ul id="ul_pics" class="ul_pics clearfix"></ul>

css:

扫描二维码关注公众号，回复： 2511686 查看本文章

.ul_pics{
    list-style: none;
    white-space:nowrap;
    display: block;
    padding:0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ul_pics li {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    background: white;
    text-align: center;
    margin: 5px;
}

.ul_pics li .img {
    width: 100px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;

}

.ul_pics li img {
    max-width: 100px;
    max-height: 100px;
    padding:5px;
    vertical-align: middle;
}

.progress {
    position: relative;
    padding: 1px;
    border-radius: 3px;
    margin: 60px 0 0 0;
}

.bar {
    background-color: green;
    display: block;
    width: 0%;
    height: 20px;
    border-radius: 3px;
}

.percent {
    position: absolute;
    height: 20px;
    display: inline-block;
    top: 3px;
    left: 2%;
    color: #fff
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

这个也要注意：
1.$path = “uploads/”;这个要改为合适的路径
2.此处是browse_button: 'upload_btn'注意和自己的控件id设为相同
3.删除的时候，注意一定要取value的值，不能直接用files里面file的属性，里面的所有参数都不是真实的路径
4.删除的时候不要用uploader.removeFile(filename);会失败且不会回调FilesRemoved。