zoukankan      html  css  js  c++  java
  • 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);
                        }
                    }
                }
            }
        }
    }





  • 相关阅读:
    unity3d 几种镜头畸变
    深度学习主机环境配置: Ubuntu16.04 + GeForce GTX 1070 + CUDA8.0 + cuDNN5.1 + TensorFlow
    Autofac 中间件使用
    NetCore SignalR 重连逻辑实现
    CentOS 7 安装 MySql8.0
    CentOS 7 安装 Nginx
    CentOS 7 安装 Docker
    Nginx 配置站点
    VUE AXIOS 跨域问题
    CentOS 7 安装 MySql 8
  • 原文地址:https://www.cnblogs.com/moqiang02/p/4061262.html
Copyright © 2011-2022 走看看