如何在 Summernote v0.8.18 中安全删除服务器端上传的图片文件-php教程-PHP中文网

如何在 Summernote v0.8.18 中安全删除服务器端上传的图片文件

本文详解在 Summernote 编辑器中实现图片服务器端删除的完整方案，涵盖前端事件监听、路径正确传递、AJAX 请求封装及后端 PHP 安全处理，解决 undefined src 报错与文件无法删除问题。

本文详解在 summernote 编辑器中实现图片服务器端删除的完整方案，涵盖前端事件监听、路径正确传递、ajax 请求封装及后端 php 安全处理，解决 `undefined src` 报错与文件无法删除问题。

Summernote v0.8.18 提供了 onMediaDelete 回调钩子，用于监听用户删除编辑器内媒体（如）的操作。但许多开发者在实现服务端删除时，常因 上下文丢失 和 参数传递错误 导致 src 为 undefined 或 PHP 端接收失败。核心问题在于：$target[0] 是原生 DOM 元素，其 .src 属性可直接读取完整 URL；而 $(this).attr("src") 在独立函数中执行时，this 指向全局对象（非目标元素），必然返回 undefined。

✅ 正确的前端实现方式

首先，在初始化 Summernote 时，确保 onMediaDelete 回调中直接提取并透传 src 值，避免在异步函数中重新解析：

$('#summernote').summernote({
  height: 400,
  callbacks: {
    onImageUpload: function(files, editor, welEditable) {
      sendFile(files[0], editor, welEditable);
    },
    onMediaDelete: function($target) {
      // $target 是 jQuery 对象，$target[0] 是原生 img 元素
      const src = $target[0].src; // ✅ 直接获取完整 URL 字符串
      if (src) {
        deleteFile(src); // 传入字符串，非 jQuery 对象
      }
      $target.remove(); // 移除 DOM 节点
    }
  }
});

然后定义 deleteFile() 函数——它不依赖 this，而是接收明确的 path 参数，并以标准键值对形式发送 POST 请求：

function deleteFile(path) {
  $.ajax({
    url: 'delete_summernote.php',
    type: 'POST',
    data: { path: path }, // ✅ 明确键名 'path'，值为完整 URL 字符串
    dataType: 'json',
    success: function(resp) {
      console.log('Server response:', resp);
      if (resp.success) {
        alert('图片已成功删除');
      }
    },
    error: function(xhr) {
      console.error('删除失败:', xhr.status, xhr.responseText);
      alert('删除失败，请检查服务器配置');
    }
  });
}

⚠️ 后端 PHP 安全处理要点（delete_summernote.php）

注意：不能使用 $_FILES['src'] —— 因为 src 是普通 POST 字符串（URL），不是上传文件。必须从 $_POST['path'] 获取，并做严格校验，防止路径遍历攻击（如 ../../etc/passwd）：

<?php header('Content-Type: application/json; charset=utf-8');

// 仅允许 POST 请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  http_response_code(405);
  echo json_encode(['success' => false, 'message' => 'Method not allowed']);
  exit;
}

// 获取并验证 path 参数
$path = $_POST['path'] ?? '';
if (empty($path)) {
  echo json_encode(['success' => false, 'message' => 'Missing path parameter']);
  exit;
}

// 解析 URL 得到本地文件路径（假设域名是 http://localhost/news/）
$base_url = 'http://localhost/news/';
if (strpos($path, $base_url) !== 0) {
  echo json_encode(['success' => false, 'message' => 'Invalid file origin']);
  exit;
}

// 映射为绝对服务器路径（务必与前端 URL 结构一致）
$local_path = $_SERVER['DOCUMENT_ROOT'] . '/news/' . str_replace($base_url, '', $path);

// 额外安全校验：确保是 web 可访问目录下的文件，且扩展名合法
$allowed_exts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
$file_ext = strtolower(pathinfo($local_path, PATHINFO_EXTENSION));
if (!in_array($file_ext, $allowed_exts) || !is_file($local_path)) {
  echo json_encode(['success' => false, 'message' => 'Invalid or non-existent file']);
  exit;
}

// 执行删除
if (unlink($local_path)) {
  echo json_encode(['success' => true, 'message' => 'File deleted successfully']);
} else {
  echo json_encode(['success' => false, 'message' => 'Failed to delete file']);
}