拖放文件时 dataTransfer.files 为空，通常是因为未正确阻止默认行为或误用 FileList 赋值方式；关键在于必须在 dragover 和 drop 事件中调用 e.preventDefault()，并直接赋值整个 dataTransfer.files（只读 FileList）给 元素。
拖放文件时 `datatransfer.files` 为空，通常是因为未正确阻止默认行为或误用 `filelist` 赋值方式；关键在于必须在 `dragover` 和 `drop` 事件中调用 `e.preventdefault()`，并直接赋值整个 `datatransfer.files`（只读 `filelist`）给 `` 元素。
在实现文件拖放（Drag & Drop）功能时，一个常见误区是试图修改 元素的 files 属性——例如通过 input.files[0] = file 方式手动赋值。但需明确：HTMLInputElement.files 是只读的 FileList 对象，无法通过索引赋值，只能整体替换。
✅ 正确做法是：将 e.dataTransfer.files（原生 FileList）直接赋值给 input 元素的 files 属性。这虽属非标准操作（规范中 files 为只读），但在主流浏览器（Chrome、Firefox、Edge、Safari）中已被广泛支持，且是目前最可靠、兼容性最佳的模拟文件选择方式。
以下是修复后的完整 JavaScript 示例：
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);
⚠️ 注意事项：
- dragover 事件中 e.preventDefault() 不可省略：这是浏览器允许执行 drop 的前提，缺失将导致 drop 事件根本不会触发；
- 不要尝试 input.files[0] = ... 或 Object.assign(input.files, ...)：FileList 是只读类数组对象，此类操作静默失败；
- 确保目标元素可接收拖放：.form-upload-avatar 需有明确尺寸与 display 样式（如 block 或 flex），避免因 CSS 导致可拖放区域为 0；
- 安全性提示：dataTransfer.files 仅在用户主动拖放时提供真实文件，不可伪造；服务端仍需严格校验文件类型、大小与内容。
? 扩展建议：若需兼容旧版 Safari（
