php 无法通过服务端代码直接设置 html 文件输入框的 `value` 或预选本地文件，这是浏览器安全策略所禁止的；正确做法是分离“显示已上传文件”与“选择新文件”两个逻辑，用前端动态渲染已有图片并支持增删。
在构建博客编辑系统时，一个常见需求是：当用户打开某篇已发布的文章编辑页，需直观呈现该文章当前关联的所有图片（如 etkinlik1.jpg），同时允许用户添加新图或移除旧图。但需明确一个关键前提——HTML 元素不支持通过 PHP 或 JavaScript 设置其 files 属性为任意本地路径文件（否则将严重违反同源与文件系统安全原则）。因此，“自动选择文件”在技术上不可行且不应追求；真正可实现且符合 UX 的目标是：自动展示已上传的图片，并提供受控的替换机制。
✅ 正确实现思路：前后端职责分离
-
后端（PHP）只负责提供元数据：从 JSON 数据库中读取 $events[$currentKey]['images']，输出为 JSON 格式供前端使用，例如：
Mfkiqpl旅行社旅游线路预订程序下载升级报告：增加动态新闻功能后台添加，删除，编辑，支持UBB代码，支持上传片及文件。 增加我要入团功能散客可以自由选择加入贵社最近要出发的团队。 增加线路置顶功能置顶后的线路永远显示在最前面。 增加同行报价功能管理员在后台添加同行用户，同行用户登录后可查看贵社线路对同行的报价。同行报价在添加线路中一并添加。（感谢网友拽哥提出修改意见） 增加更多线路显示的分页功能方便大型旅行社由于线路过多而引起的部分
<?php $currentEvent = $events[$currentKey] ?? []; $existingImages = $currentEvent['images'] ?? []; ?> <script> const existingImageNames = <?php echo json_encode($existingImages); ?>; </script>
-
前端（JavaScript）负责可视化与交互：
- 页面加载后，遍历 existingImageNames，为每张图生成带删除功能的标签（.tag--image）；
- 使用 仅用于新增上传，不尝试“回填”；
- 删除操作仅从 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()；
-
安全性兜底：即使前端渲染了旧图缩略图（如
），也需确保后端校验所有提交的文件名均属于当前用户/文章权限范围内，防止路径遍历或越权访问。
综上，放弃“自动选择文件”的错误目标，转向“清晰展示 + 安全可控的增删流程”，才是符合 Web 标准、用户体验与工程实践的最佳路径。
