php 无法通过服务端代码直接设置 html 文件输入框的 `value` 或预选本地文件，这是浏览器安全策略所禁止的；正确做法是分离“显示已上传文件”与“选择新文件”两个逻辑，用前端动态渲染已有图片并支持增删。
在构建博客编辑系统时，一个常见需求是：当用户打开某篇已发布的文章编辑页，需直观呈现该文章当前关联的所有图片（如 etkinlik1.jpg），同时允许用户添加新图或移除旧图。但需明确一个关键前提——HTML <input type="file"> 元素不支持通过 PHP 或 JavaScript 设置其 files 属性为任意本地路径文件（否则将严重违反同源与文件系统安全原则）。因此，“自动选择文件”在技术上不可行且不应追求；真正可实现且符合 UX 的目标是：自动展示已上传的图片，并提供受控的替换机制。
✅ 正确实现思路：前后端职责分离
-
后端（PHP）只负责提供元数据：从 JSON 数据库中读取 $events[$currentKey]['images']，输出为 JSON 格式供前端使用，例如：
<?php $currentEvent = $events[$currentKey] ?? []; $existingImages = $currentEvent['images'] ?? []; ?> <script> const existingImageNames = <?php echo json_encode($existingImages); ?>; </script>
-
前端（JavaScript）负责可视化与交互：
- 页面加载后，遍历 existingImageNames，为每张图生成带删除功能的标签（.tag--image）；
- 使用 <input type="file" multiple> 仅用于新增上传，不尝试“回填”；
- 删除操作仅从 DOM 和内存中移除对应项，不影响原始服务器文件（后续提交时由后端决定是否清理未引用的旧文件）。
? 示例前端逻辑（精简版）
<!-- 显示已有图片的容器 -->
<div id="existing-images"></div>
<!-- 新增上传入口 -->
<input id="sendImages" type="file" name="images[]" multiple />
<script>
const existingImageNames = ["etkinlik1.jpg", "etkinlik2.png"];
const container = document.getElementById("existing-images");
const fileInput = document.getElementById("sendImages");
// 渲染已有图片标签
existingImageNames.forEach(filename => {
const tag = document.createElement("span");
tag.className = "tag--image";
tag.innerHTML = `<span>${filename}</span><button type="button">×</button>`;
container.appendChild(tag);
});
// 删除标签并同步 DataTransfer 对象（若需保留原 input.files 状态）
container.addEventListener("click", (e) => {
if (e.target.tagName === "BUTTON") {
const tag = e.target.closest(".tag--image");
const filename = tag.querySelector("span").textContent;
// 从 DOM 移除
tag.remove();
// 可选：若需在 submit 前排除该文件，可在 FormData 中手动过滤
// （注意：不能修改 input.files，但可控制提交内容）
}
});
// 新增文件时，可实时预览（非必需但推荐）
fileInput.addEventListener("change", () => {
Array.from(fileInput.files).forEach(file => {
const previewTag = document.createElement("span");
previewTag.className = "tag--image tag--new";
previewTag.innerHTML = `<span>${file.name}</span><button type="button">×</button>`;
container.appendChild(previewTag);
});
});
</script>⚠️ 重要注意事项
- 永远不要尝试 input.files = ...：现代浏览器会静默忽略该赋值，或抛出 DOMException，属于被明确禁止的行为；
- 删除 ≠ 物理删除文件：前端移除标签仅表示“本次提交不再包含该图”，真实文件清理应在后端接收表单后，比对新旧 images[] 数组，识别出被移除的文件名并调用 unlink()；
- 安全性兜底：即使前端渲染了旧图缩略图（如 <img src="/uploads/etkinlik1.jpg">），也需确保后端校验所有提交的文件名均属于当前用户/文章权限范围内，防止路径遍历或越权访问。
综上，放弃“自动选择文件”的错误目标，转向“清晰展示 + 安全可控的增删流程”，才是符合 Web 标准、用户体验与工程实践的最佳路径。
