在实现文件拖拽上传时，event.dataTransfer.files 为空通常是因为未正确阻止默认行为或误操作 FileList（该对象只读，不能直接修改单个元素）。关键在于：必须在 dragover 和 drop 事件中调用 e.preventDefault()，且应整体赋值 dataTransfer.files 而非尝试修改 input.files[0]。
在实现文件拖拽上传时，`event.datatransfer.files` 为空通常是因为未正确阻止默认行为或误操作 `filelist`（该对象只读，不能直接修改单个元素）。关键在于：必须在 `dragover` 和 `drop` 事件中调用 `e.preventdefault()`，且应整体赋值 `datatransfer.files` 而非尝试修改 `input.files[0]`。
要使 HTML 文件拖拽（Drag & Drop）正常工作，必须满足两个核心前提：
- dragover 事件必须被显式阻止默认行为：浏览器默认禁止在任意元素上投放文件，只有主动调用 e.preventDefault() 才能启用投放区域；
- drop 事件中不可对 input.files 进行索引赋值：HTMLInputElement.files 是只读的 FileList 对象，无法通过 files[0] = file 修改；正确做法是将整个 dataTransfer.files 直接赋值给 input.files。
以下是修复后的完整实现示例：
const form = document.querySelector('.form-upload-avatar');
const dropAvatarHandler = (e) => {
e.preventDefault(); // ✅ 必须阻止默认行为，否则 drop 不会触发或 files 为空
if (!e.dataTransfer || !e.dataTransfer.files || e.dataTransfer.files.length === 0) {
console.warn('No files dropped.');
return;
}
const fileInput = form.querySelector('.input-upload-avatar');
if (fileInput) {
// ✅ 正确方式：整体赋值 FileList（虽为只读属性，但可通过此方式更新）
fileInput.files = e.dataTransfer.files;
// ✅ 后续可触发预览、校验等逻辑（如 previewAvatar(e)）
previewAvatar(fileInput); // 注意：传入 input 元素更合理，而非 event
}
};
const dragoverAvatarHandler = (e) => {
e.preventDefault(); // ✅ 关键！无此句，drop 事件不会触发，files 始终为空
};
// 绑定事件
form.addEventListener('dragover', dragoverAvatarHandler);
form.addEventListener('drop', dropAvatarHandler);
⚠️ 重要注意事项：
- 元素本身不可直接接收拖拽事件（它不响应 drop），因此事件需绑定在它的父容器（如本例中的 .form-upload-avatar）上；
- FileList 是只读类数组对象，任何类似 input.files[0] = file 的写法均无效，且可能引发静默失败；
- 若需支持多文件，可遍历 e.dataTransfer.files 并做类型/大小校验（例如仅允许 image/jpeg、image/png，且单文件 ≤ 5MB）；
- 为提升用户体验，建议在 dragenter/dragleave 中动态添加 drag-active 类，提供视觉反馈。
最后，确保你的 没有被 CSS 隐藏后又未正确透传事件（例如 opacity: 0 + position: absolute 是常见安全做法，但需保证其仍处于 DOM 流中并可被 JS 访问）。只要遵循上述原则，拖拽文件后 dataTransfer.files 就能稳定获取到用户选择的文件列表。
