php版给UEditor的图片在线管理栏目增加图片删除功能

时间:2023-03-09 17:59:06
php版给UEditor的图片在线管理栏目增加图片删除功能

1.找到uedior/dialogs/image/image.js文件,Add为修改部分的代码:

/**
* tab点击处理事件
* @param tabHeads
* @param tabBodys
* @param obj
*/
function clickHandler(tabHeads, tabBodys, obj) {
//head样式更改
for (var k = 0,
len = tabHeads.length; k < len; k++) {
tabHeads[k].className = "";
}
obj.className = "focus";
//body显隐
var tabSrc = obj.getAttribute("tabSrc");
for (var j = 0,
length = tabBodys.length; j < length; j++) {
var body = tabBodys[j],
id = body.getAttribute("id");
body.onclick = function() {
this.style.zoom = 1;
};
if (id != tabSrc) {
body.style.zIndex = 1;
} else {
body.style.zIndex = 200;
//当切换到本地图片上传时,隐藏遮罩用的iframe
if (id == "local") {
toggleFlash(true);
maskIframe.style.display = "none";
//处理确定按钮的状态
if (selectedImageCount) {
dialog.buttons[0].setDisabled(true);
}
} else {
toggleFlash(false);
maskIframe.style.display = "";
dialog.buttons[0].setDisabled(false);
}
var list = g("imageList");
list.style.display = "none";
//切换到图片管理时,ajax请求后台图片列表
if (id == "imgManager") {
list.style.display = "";
//已经初始化过时不再重复提交请求
if (!list.children.length) {
ajax.request(editor.options.imageManagerUrl, {
timeout: 100000,
action: "get",
onsuccess: function(xhr) {
//去除空格
var tmp = utils.trim(xhr.responseText),
imageUrls = !tmp ? [] : tmp.split("ue_separate_ue"),
length = imageUrls.length;
g("imageList").innerHTML = !length ? " " + lang.noUploadImage: "";
for (var k = 0,ci; ci = imageUrls[k++];) {
//Add Start===============================
var div = document.createElement("div");
var img = document.createElement("img");
var del = document.createElement("img");
var p = document.createElement("p"); div.appendChild(img);
div.appendChild(p);
p.appendChild(del);
div.style.display = "none"; img.style.height = "100px";
img.style.width = "100px";
del.setAttribute("src", "images/del.png");
p.style.marginTop = "-104px";
p.style.marginLeft = "90px"; g("imageList").appendChild(div);
img.onclick = function() {
changeSelected(this);
}; del.onclick = function() {
var me = this,
src = me.getAttribute("alt", 2);
var pic = me.parentNode.parentNode.childNodes[0];
if (!confirm("删除操作不可恢复,您确认要删除本图片么?")) return;
ajax.request(editor.options.imageManagerUrl, {
action: "del",
fileName: src.substr(src.lastIndexOf("/") + 1),
onsuccess: function(xhr) {
me.parentNode.parentNode.removeChild(pic);
me.parentNode.removeChild(me);
},
onerror: function(xhr) {
alert("服务器删除图片失败,请重试!");
}
});
};
//Add End================================
img.onload = function() {
this.parentNode.style.display = "";
var w = this.width,
h = this.height;
scale(this, 100, 120, 80);
this.title = lang.toggleSelect + w + "X" + h;
this.onload = null;
};
img.setAttribute(k < 35 ? "src": "lazy_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
img.setAttribute("title", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
img.setAttribute("width", "100px");
img.setAttribute("height", "100px"); del.onload = function() { //设置加载del图片时的样式
this.style = "border:0";
this.onload = null;
};
del.setAttribute("alt", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig, ""));
}
},
onerror: function() {
g("imageList").innerHTML = lang.imageLoadError;
}
});
}
}
if (id == "imgSearch") {
selectTxt(g("imgSearchTxt"));
}
if (id == "remote") {
$focus(g("url"));
}
}
}
}

找到uedior/php/imageManager.php文件,增加以下内容:

if ($action == "del") {
$fileName = $_POST['fileName'];
foreach($paths as $path) {
$str1 = delfiles($fileName, $path);
break;
}
} function delfiles($fileName, $path, &$files = array()) {
if (!is_dir($path)) return null;
$handle = opendir($path);
while (false !== ($file = readdir($handle))) {
if ($file != '.' && $file != '..') {
$path2 = $path.'/'.$file;
if (is_dir($path2)) {
delfiles($fileName, $path2, $files);
} else {
if (preg_match("/\.(gif|jpeg|jpg|png|bmp)$/i", $file)) {
$path3 = str_replace('../../', '/static/', $path2);
$fileImg = basename($path3);
if ($fileImg == $fileName) {
$is_del = unlink($path2);
}
}
}
}
}
}

php版给UEditor的图片在线管理栏目增加图片删除功能