UEditor多图上传在线管理增加删除图片功能

由于我拿到的档桉些许与参考的不同因此以下为我的与参考的综合解法。

增加js删除方法,放到ueditor/dialogs/image/image.html里面 :

<script>
//新增在线管理删除图片
function uedel(path, id){
if(confirm('您确定要删除它吗?删除后不可恢复!')){
var url = "../../php/action_del.php?path="+path;
$.getJSON(url,function(data){
$.each(data, function(key, val){
if (val.state == 'success') {
alert(val.message);
$("#"+id).parent("li").remove();
}else{
alert(val.message);
}
});
});

</script>

修改ueditor/dialogs/image/image.js文件(大约902行)

del = document.createElement('a');
del.innerHTML = '删除';
domUtils.addClass(del, 'del');
var delid='imagelist_'+i;
del.setAttribute('id',delid);
del.setAttribute('href','javascript:;'); del.setAttribute('onclick','uedel("'+list[i].url+'","'+delid+'")');

924行 增加一句:item.appendChild(del); 为了把a标签加载进去

item.appendChild(del);

到这里 我们可以看到 已经有了“删除”链接了 具体样式修改 ueditor/dialogs/image/image.css 我是直接在末尾添加:

/* 新增在线管理删除图片样式*/
#online li a.del {
width: auto;
position: absolute;
top: 0;
right: 0;
color:#F00;
background-color:#DDDDDD;
opacity:0.8;
filter:alpha(80);
border: 0;
z-index:3;
text-align:right;
text-decoration:none;
}

action_del.php

//先自行设定阵列以及对应的值
$json = array();//先宣告阵列
$path = "-1";
if (isset($_GET['path'])) {
$path = "../../../".$_GET['path'];
}
if (file_exists($path)){
unlink($path);
$data[0]=array(
"state"=> "success",
"message" => "删除成功!"
);
}else{
$data[0]=array(
"state"=> "error",
"message" => "删除失败!"
);
}
$json[] =$data[0];
echo json_encode($json);

参与评论