PHP版ではUEditorのオンライン画像管理欄に画像削除機能を追加
php バージョンでは、UEditor のオンライン画像管理列に画像削除機能を追加します
1. udior/dialogs/image/image.js ファイルを見つけて、コードの変更部分を追加します:
/** * 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); } } } } }}


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











element.style で要素を変更するメソッド: 1. 要素の背景色を変更する; 2. 要素のフォント サイズを変更する; 3. 要素の境界線のスタイルを変更する; 4. 要素のフォント スタイルを変更する; 5要素の水平方向の配置を変更します。詳細な紹介: 1. 要素の背景色を変更します。構文は "document.getElementById("myElement").style.backgroundColor = "red";"; 2. 要素のフォント サイズなどを変更します。

Linux システムで PATH 環境変数を設定する方法 Linux システムでは、PATH 環境変数を使用して、システムがコマンド ラインで実行可能ファイルを検索するパスを指定します。 PATH 環境変数を正しく設定すると、任意の場所でシステム コマンドやカスタム コマンドを実行できるようになります。この記事では、Linux システムで PATH 環境変数を設定する方法と詳細なコード例を紹介します。現在の PATH 環境変数を表示する ターミナルで次のコマンドを実行して、現在の PATH 環境変数を表示します: echo$P

ファンクションとは、関数を意味します。これは、特定の関数を備えた再利用可能なコード ブロックです。プログラムの基本コンポーネントの 1 つです。入力パラメータを受け取り、特定の操作を実行し、結果を返すことができます。その目的は、再利用可能なコード ブロックをカプセル化することです。コードの再利用性と保守性を向上させるコード。

スタイルを動的に変更するためのメソッド: 1. "<div className='scroll-title clear-fix' ref={ this.manage }>" のような構文を使用して、スタイルを変更する必要がある要素に ref を追加します。 . 動的制御による 状態の変化により要素のスタイルが変更される; 3. DOM 内で JS コードを使用することで、異なる DOM の表示と非表示の遷移が実現されます。

スタイルの新機能 Vue3.2 バージョンでは、ローカル スタイル、CSS 変数、テンプレートに公開されるスタイルなど、単一ファイル コンポーネントのスタイルに多くのアップグレードが行われました。 (学習ビデオ共有: vue ビデオ チュートリアル) 1. ローカル スタイル ラベルにscopedattribute がある場合、その CSS は現在のコンポーネントの要素にのみ適用されます: hi.example{color:red;} 2. 深さセレクターはスコープされます。スタイル内のセレクターがより「深い」選択を行いたい場合、つまりサブコンポーネントに影響を与える場合は、:deep() 疑似クラス: .a:deep(.b){/*...* を使用できます。 / }v-html を通じて作成された DOM コンテンツは、

パス環境変数を設定する方法: 1. Windows システムでは、[システムのプロパティ] を開き、[プロパティ] オプションをクリックし、[システムの詳細設定] をクリックし、[システムのプロパティ] ウィンドウで [詳細] タブを選択します。 「環境変数」ボタンをクリックし、「パス」を見つけてクリックして編集し、保存します。 2. Linux システムの場合は、ターミナルを開き、bash 構成ファイルを開き、ファイルの最後に「export PATH=$PATH: file path」を追加します。ファイルを保存して保存します; 3. MacOS システムの場合、操作は上記と同じです。

Vue エラー: v-bind を使用してクラスとスタイルを正しくバインドできません。解決方法は? Vue 開発では、v-bind 命令を使用してクラスとスタイルを動的にバインドすることがよくありますが、v-bind を正しく使用してクラスとスタイルをバインドできないなどの問題が発生することがあります。この記事では、この問題の原因と解決策を説明します。まず、v-bind ディレクティブを理解しましょう。 v-bind は V をバインドするために使用されます

この記事では、JavaScript に関する関連知識をお届けします。主に、var、let、const の違い、ECMAScript と JavaScript の関係について紹介します。興味のある方はぜひご覧ください。皆さんのお役に立てれば幸いです。
