drop事件里必须用e.preventDefault()才能触发替换，根本原因是dragover中未调用e.preventDefault()导致浏览器阻止投放，drop永不触发；e.dataTransfer.files是唯一可靠文件入口，需校验type和size，服务端替换需配合URL变更防缓存。
drop 事件里必须用 e.preventDefault() 才能触发替换
很多开发者写了 draggable="true"、绑了 drop 监听，但拖文件进去没反应——根本原因是漏掉了 dragover 中的 e.preventDefault()。浏览器默认会阻止文件投放，不显式放行，drop 永远不会触发。
常见错误写法：
只监听 drop，没管 dragover；或者写了 dragover 但没调 preventDefault。
- 目标区域（比如
<div id="drop-area">）必须同时监听 <code>dragover和drop -
dragover回调里只做一件事：e.preventDefault()（可顺带加高亮样式） -
drop回调开头也必须写e.preventDefault()，否则浏览器可能打开图片或跳转链接 -
e.dataTransfer.files返回的是FileList，哪怕只拖一个文件也要用[0]取出 - 上传前务必校验：
file.type（如"image/jpeg"）、file.size（防超大文件阻塞） - 若需预览，用
FileReader读取file，不是读input.files - 上传成功后，服务端返回文件最后修改时间：
filemtime('images/photo.jpg')，前端拼成src="images/photo.jpg?ts=1727002080" - 更稳妥：服务端重命名文件（如
photo_1727002080.jpg），返回新文件名，前端更新src - 绝对不要依赖
location.reload()或强制清空缓存头，用户感知差且不可控 -
enctype="multipart/form-data"是表单硬性要求，漏掉则$_FILES为空数组，后端根本收不到文件 - 目标路径权限必须可写，比如
chmod 755 images/；若images/photo.jpg是只读，move_uploaded_file返回false且无报错 - 必须校验
$_FILES['file']['type']和$_FILES['file']['tmp_name']是否合法，否则可能传入.php文件导致 RCE
e.dataTransfer.files 是唯一可靠入口，别碰 event.target.files
拖入文件后，event.target 是目标 DOM 元素，它没有 files 属性。只有 e.dataTransfer.files 才是标准、跨浏览器兼容的文件列表对象。
错误示例：document.getElementById('drop-area').files → undefined；e.target.files → 同样无效。
立即学习“前端免费学习笔记（深入）”；
服务端替换 ≠ 前端刷新，URL 不变就看不到新内容
即使 PHP 的 move_uploaded_file 成功覆盖了 images/photo.jpg，前端 <img src="images/photo.jpg" alt="HTML怎么拖拽文件替换原有内容？更新操作技巧" > 极大概率仍显示旧图——浏览器缓存了该 URL 对应的响应。
解决方法不是禁用缓存（影响性能），而是让 URL 变化：
权限、MIME、enctype 三处断掉，替换就静默失败
move_uploaded_file 覆盖同名文件只是文件系统操作，业务层面的“替换成功”需要全链路确认。任意一环缺失，用户都会卡在“上传完成→还是旧图”的死循环里。
真正难的不是“怎么传”，是“怎么确认它真的替换了”。路径权限、MIME 校验、缓存穿透、错误反馈链——每个环节都要有明确的状态输出，不能靠猜测。
