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:
.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。
类似资料：