拖拽上传区域嵌入<td>需用position:relative+绝对定位<div>隔离事件流，阻止dragenter/dragover默认行为；文件信息存data-属性，URL.createObjectURL预览并及时revoke；多单元格统一table级监听，drop时校验目标并防抖；删除时同步清理DOM、object URL、网络请求。
拖拽上传区域怎么嵌入 <td> 里不破坏表格布局
直接把 dropzone 或 input[type="file"] 塞进 <td> 容易触发浏览器默认的「拖拽重排」行为，导致整个表格错位甚至卡死。关键不是加功能，而是隔离拖拽事件流。
- 给
<td>设置position: relative，内部用<div>绝对定位覆盖全单元格，作为实际拖拽捕获层 - 必须阻止
dragenter、dragover的默认行为，否则浏览器会显示“禁止”图标 - 避免在
<td>上监听drop—— 表格本身可能拦截事件，推荐监听其子<div>的drop - 不要用
contenteditable或designMode混合操作，它们和文件拖拽冲突严重
FileReader 读取后怎么塞进表格且保留原始文件名和类型
用户拖进来的文件不能只存 blob URL，否则刷新就丢；也不能直接存 base64（大文件撑爆内存）。得在 DOM 中建立轻量映射关系，同时把元信息存在 data- 属性里。
- 每个附件容器（如
<div class="attachment-preview">）上挂data-filename、data-mime、data-size - 用
URL.createObjectURL(file)生成临时地址，用于<img>预览或<a href>下载，别用readAsDataURL - 如果需要服务端持久化，上传成功后把返回的 ID 存到
data-server-id，和本地文件对象解耦 - 注意：Safari 对
URL.createObjectURL的回收更激进，记得在移除预览时调用URL.revokeObjectURL
多个单元格同时拖拽上传时如何避免事件干扰
一个页面有几十个可拖拽 <td>，鼠标划过时频繁触发 dragenter，很容易误判目标单元格。核心是用 event.relatedTarget 和坐标判断真正落点，而不是依赖事件冒泡路径。
- 所有拖拽监听器统一注册在
table级别，用event.target.closest("td")动态找目标单元格 - 在
dragover里不做任何 DOM 修改，只设event.preventDefault()和event.dataTransfer.dropEffect = "copy" - 真正处理文件只在
drop事件里做，且立即检查event.target是否为预期的附件容器，不是就return - 加防抖：同一
<td>500ms 内重复drop只响应第一次，防止用户手抖多次释放
附件删除后如何安全清理 DOM 和内存引用
点击「×」删掉预览图时，只删 <img> 不够——URL.createObjectURL 创建的引用还在，长期驻留会吃光内存，尤其在 Chrome 中。
立即学习“前端免费学习笔记（深入）”；
- 删除前先从对应
<div>读取data-url（即createObjectURL返回值），再调用URL.revokeObjectURL(url) - 清空
data-属性的同时，把对应的File对象引用设为null，帮助 GC - 如果该单元格还关联着未提交的上传任务（比如用
fetch正在发请求），需调用abort()并清除AbortController实例 - 别用
innerHTML = ""清空单元格——它不会自动清理事件监听器和 object URL，用while (el.firstChild) el.removeChild(el.firstChild)更稳妥
