如何正确从 drag-and-drop 事件中获取拖入的文件

在实现文件拖拽上传时，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）正常工作，必须满足两个核心前提：

1. dragover 事件必须被显式阻止默认行为：浏览器默认禁止在任意元素上投放文件，只有主动调用 e.preventDefault() 才能启用投放区域；
2. 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);

⚠️ 重要注意事项：

• <input type=”file”> 元素本身不可直接接收拖拽事件（它不响应 drop），因此事件需绑定在它的父容器（如本例中的 .form-upload-avatar）上；
• FileList 是只读类数组对象，任何类似 input.files[0] = file 的写法均无效，且可能引发静默失败；
• 若需支持多文件，可遍历 e.dataTransfer.files 并做类型/大小校验（例如仅允许 image/jpeg、image/png，且单文件 ≤ 5MB）；
• 为提升用户体验，建议在 dragenter/dragleave 中动态添加 drag-active 类，提供视觉反馈。

最后，确保你的 <input type=”file”> 没有被 CSS 隐藏后又未正确透传事件（例如 opacity: 0 + position: absolute 是常见安全做法，但需保证其仍处于 DOM 流中并可被 JS 访问）。只要遵循上述原则，拖拽文件后 dataTransfer.files 就能稳定获取到用户选择的文件列表。