如何实现php UEditor删除图片功能

发布时间:2020-08-10 09:49:36 作者:Leah
来源:亿速云 阅读:194

今天就跟大家聊聊有关如何实现php UEditor删除图片功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

php ueditor删除图片的实现方法:首先找到“uedior/dialogs/image/image.js”文件并修改Add内容;然后打开“mageManager.php”文件并添加内容为“function delfile()”即可。

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 != '..') {
            $path3 = $path.'/'.$file;
            if (is_dir($path3)) {
                delfiles($fileName, $path3, $files);
            } else {
                if (preg_match("/\.(gif|jpeg|jpg|png|bmp)$/i", $file)) {
                    $path4 = str_replace('../../', '/static/', $path3);
                    $fileImg = basename($path4);
                    if ($fileImg == $fileName) {
                        $is_del = unlink($path3);
                    }
                }
            }
        }
    }
}

看完上述内容,你们对如何实现php UEditor删除图片功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

推荐阅读:
  1. VUE +UEditor如何实现单图片跨域上传功能
  2. springboot下怎么实现ueditor上传功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ueditor php ditor

上一篇:Java如何实现中缀表达式转后缀表达式

下一篇:详解Oracle创建表的参数

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》