拖放文件时，`dataTransfer.files` 为空通常源于未正确阻止默认行为或错误操作 `FileList`。核心方案是：在 `dragover` 和 `drop` 事件中都执行 `e.preventDefault()`，并将只读的 `dataTransfer.files` 整体赋值给 `` 元素的 `files` 属性。
拖放文件过程中，最令人困扰的场景莫过于文件明明拖入，`dataTransfer.files` 却返回空集合。经排查，绝大多数问题来自遗漏默认行为阻止，或采用不当方式操作 `FileList`。实际上只需抓住两个要点：第一，在 `dragover` 事件与 `drop` 事件内均需调用 `e.preventDefault()`；第二，将只读的 `FileList` 对象 `dataTransfer.files` 直接完整赋值给 `` 元素的 `files` 属性。
许多开发者在实现拖放上传功能时，会下意识尝试修改 `` 的 `files` 属性，例如通过 `input.files[0] = file` 手动添加文件。这里必须强调：`HTMLInputElement.files` 是只读的 `FileList`，不允许按索引单独赋值。要使其生效，只能整体替换 `FileList` 对象，没有其他途径。
✅ 正确做法是什么？很简单：将 `e.dataTransfer.files` 这一原生 `FileList` 对象直接整体赋予 input 元素的 `files` 属性。严格遵循规范来讲，`files` 属性为只读，因此这种赋值属于“非标准操作”——但请放心，Chrome、Firefox、Edge、Safari 等主流浏览器均已提供支持。实际项目验证表明，这是目前最可靠、兼容性最高的模拟文件选择方案。
以下是一段完整的修复代码，清晰展示实现方式：
const form = document.querySelector('.form-upload-avatar');
const dropAvatarHandler = (e) => {
e.preventDefault(); // ✅ 必须阻止默认行为（否则浏览器会打开文件）
if (!e.dataTransfer || !e.dataTransfer.files || e.dataTransfer.files.length === 0) {
console.warn('No files dropped or dataTransfer is invalid');
return;
}
const fileInput = form.querySelector('.input-upload-avatar');
if (fileInput) {
// ✅ 正确：整体赋值 FileList（浏览器兼容支持）
fileInput.files = e.dataTransfer.files;
// ✅ 后续可立即触发预览或校验逻辑
previewAvatar(fileInput); // 假设此函数接收 input 元素并处理 files
}
};
const dragoverAvatarHandler = (e) => {
e.preventDefault(); // ✅ 必须阻止 dragover 默认行为，否则 drop 不会触发
};
// 绑定事件（推荐使用 form 元素而非 document.querySelector 多次调用）
form.addEventListener('dragover', dragoverAvatarHandler);
form.addEventListener('drop', dropAvatarHandler);
⚠️ 注意事项：
- 仅对 drop 事件添加 preventDefault 不够——`dragover` 事件同样需要阻止默认行为。浏览器只有检测到 `preventDefault` 被调用，才会允许触发 drop 事件，否则 drop 根本不会执行。
- 避免使用错误捷径，例如 `input.files[0] = ...` 或 `Object.assign(input.files, ...)`，这些操作均无效。`FileList` 是只读类数组对象，此类赋值会静默失败，且不会抛出任何错误。
- 确保拖放目标区域具有可见性。`.form-upload-avatar` 应设置明确的尺寸与 `display` 样式（如 `block` 或 `flex`），避免因零宽高导致用户无法拖放。
- 注意安全性：`dataTransfer.files` 仅在用户主动拖放时产生真实文件，无法通过脚本伪造。但服务端仍需完成文件类型、大小及内容等校验，不可省略。
? 扩展建议：若需兼容旧版 Safari（版本低于 15.4），或追求 100% 规范兼容性，可改用 `DataTransferItem.getAsFile()` 配合 `DataTransfer` 构造函数模拟上传。但对大多数现代项目而言，直接赋值 `files` 属性已足够简洁高效，并经过大量实际项目验证。
