当前位置:文档之家› kindeditor删除上传图片并且删除服务器里面的图片

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('<input type="hidden" name="delimg[]" value="'+resultimg[r]+'"/>');
}else{
$('textarea[name="content"]').after('<span id="delimg"><input type="hidden" name="delimg[]" value="'+resultimg[r]+'"/></span>');
}
}
}
});
});
//以上面需要使用到下面三个函数
//返回编辑器里面非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<a.length;i++){
if(b.indexOf(a[i])<0 ){
c.push(a[i]);
}
}
for(var i=0;i<b.length;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<this.arr.length;i++)
{
for (var j=i+1;j<this.arr.length;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(图片的绝对路径);
}
}。

相关主题