kindeditor删除上传图片并且删除服务器里面的图片
kindeditor编辑上传图片删除并且删除服务器里面的图片
一般来说有两种思路
1,捕捉用户删除图片的动作,使用ajax发送url给服务器来删除,但是研究半天硬是找不到该事件,谁有思路要告诉我呀。
2,本人煞费苦心想出来的(嘿嘿),不过也是一般人能想出来的。获取用户在编辑的时候被删除图片的路径并保存到隐藏域里面,提交表单的时候顺便删除这些不用的图片,一下客户端的js脚本语言。
【客户端的js代码】
KindEditor.ready(
function(K){
//声明3个数组
//页面一打开的图片
var oldimgsrc=[];
//所有上传的图片
var uploadimgsrc=[];
//最后保存下来的图片
var saveimgsrc=[];
//创建一个编辑器对象
var editor = K.create('textarea[name="content"]', {
allowFileManager : false,
items:['bold','italic','justifyleft','justifycenter','justifyright','image','fontsize','forecolor','hilitecolor','font name','fullscreen'],
//上传图片后触发的事件
afterUpload:function(url){
uploadimgsrc.push(url.split('uploadfiles')[1]);
},
//保存新上传的图片路径
afterCreate:function(){
oldimgsrc=pickimg(editor.html());
},
//当编辑器失去焦点
afterBlur:function(){
//console.log(editor.items);
saveimgsrc=pickimg(editor.html());
//合并数组
var allimgsrc=oldimgsrc.concat(uploadimgsrc).concat(saveimgsrc);
//删除相同的元素
var uniq=new arr_uniq(allimgsrc);
uniq.uniq();
var resultimg=[];
//如果没有上传新图片
if( uploadimgsrc.length==0 ) {
//比较不同的元素
resultimg=slectArray(allimgsrc,saveimgsrc);
}else{
resultimg=slectArray(allimgsrc,saveimgsrc);
}
//比较出页面一打开的图片和编辑完之后图片中不同路径的图片
$('#delimg').html("");
for(var r in resultimg){
if($('#delimg').size()==1){
//隐藏域为delimg[],保存多个删除的图片路径
$('#delimg').append('');
}else{
$('textarea[name="content"]').after('');
}
}
}
});
});
//以上面需要使用到下面三个函数
//返回编辑器里面非http的图片的内容
function pickimg(content){
///(.*?)\/uploadfiles\/(.*?)/
var re=/src="(.*?)\/uploadfiles\/(.*?)"/ig;
arr=content.match(re);
var ar=[];
var tmp='';
for(var i in arr){
tmp=arr[i].split('uploadfiles')[1];
ar[i]=tmp.replace('"','');
}
return ar;
}
//返回数组不相同的元素
function slectArray(a,b){
var c=[];
for(var i=0;i if(b.indexOf(a[i])<0 ){ c.push(a[i]); } } for(var i=0;i if(a.indexOf(b[i])<0 ){ c.push(b[i]); } } return c; } //删除不同元素 function arr_uniq(arr){ this.arr=arr; } arr_uniq.prototype.uniq=function(){ this.ori = [].concat(this.arr); for (var i=0;i { for (var j=i+1;j { if (this.arr[i]==this.arr[j]) { this.arr.splice(j,1); } } } return this.arr; } 【服务端的php代码】 //删除不需要的本地图片 if( !empty($_POST['delimg']) ){ //delimg隐藏域名字 foreach( $_POST['delimg'] as $v ) { @unlink(图片的绝对路径); } }