在实现拖拽上传时，e.dataTransfer.files 为空通常是因为未正确阻止默认行为或错误地尝试修改只读的 FileList；关键在于必须在 dragover 和 drop 事件中调用 e.preventDefault()，并直接赋值整个 FileList（而非单个文件）到 元素。
在实现拖拽上传时，`e.datatransfer.files` 为空通常是因为未正确阻止默认行为或错误地尝试修改只读的 `filelist`；关键在于必须在 `dragover` 和 `drop` 事件中调用 `e.preventdefault()`，并直接赋值整个 `filelist`（而非单个文件）到 `` 元素。
要使 HTML5 拖拽上传正常工作，需同时满足两个核心条件：事件拦截与正确的文件赋值方式。
首先，dragover 事件必须显式调用 e.preventDefault() —— 这是浏览器允许执行 drop 的前提。若缺少该调用，drop 事件虽可能触发，但 dataTransfer.files 始终为空数组，因为浏览器默认会取消拖拽上下文。
其次， 的 files 属性是只读的 FileList 对象，不能通过索引赋值（如 input.files[0] = file），这会导致静默失败。正确做法是将整个 e.dataTransfer.files 直接赋给 input.files：
const form = document.querySelector('.form-upload-avatar');
const dropAvatarHandler = (e) => {
e.preventDefault();
if (!e.dataTransfer.files.length) {
console.warn('No files dropped.');
return;
}
const fileInput = form.querySelector('.input-upload-avatar');
fileInput.files = e.dataTransfer.files; // ✅ 正确：赋值整个 FileList
// 后续可触发预览、校验等逻辑
previewAvatar(e);
};
const dragoverAvatarHandler = (e) => {
e.preventDefault(); // ✅ 必须存在，否则 drop 不生效
};
form.addEventListener('dragover', dragoverAvatarHandler);
form.addEventListener('drop', dropAvatarHandler);
⚠️ 注意事项：
- 不要试图修改
files[0]或使用Array.from(files)后赋值 ——FileList是不可变类数组对象； - 确保目标元素（此处为
.form-upload-avatar）具有明确的尺寸和display: block行为，否则视觉上“可拖入”但实际无响应； - 若需支持多文件，注意
默认仅接受单文件（除非添加multiple属性），而dataTransfer.files天然支持多文件，赋值后可通过fileInput.files.length判断； - 安全提示：前端无法绕过
accept属性限制，但服务端仍需严格校验文件类型与内容，不可信任客户端传入的type字段。
最后，建议在 drop 处理函数中加入基础校验（如文件类型、大小）并提供用户反馈（如 toast 提示），以提升健壮性与体验。
