如何在页面加载时自动展示已上传的文件（而非预选文件）

php 无法通过服务端代码直接设置 html 文件输入框的 `value` 或预选本地文件，这是浏览器安全策略所禁止的；正确做法是分离“显示已上传文件”与“选择新文件”两个逻辑，用前端动态渲染已有图片并支持增删。

在构建博客编辑系统时，一个常见需求是：当用户打开某篇已发布的文章编辑页，需直观呈现该文章当前关联的所有图片（如 etkinlik1.jpg），同时允许用户添加新图或移除旧图。但需明确一个关键前提——HTML 元素不支持通过 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）负责可视化与交互：

  1. 页面加载后，遍历 existingImageNames，为每张图生成带删除功能的标签（.tag–image）；
  2. 使用 仅用于新增上传，不尝试“回填”；
  3. 删除操作仅从 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 标准、用户体验与工程实践的最佳路径。