如何正确获取拖放事件中的文件数据

拖放文件时 dataTransfer.files 为空，通常是因为未正确阻止默认行为或误用 FileList 赋值方式；关键在于必须在 dragover 和 drop 事件中调用 e.preventDefault()，并直接赋值整个 dataTransfer.files（只读 FileList）给 <input type="file"> 元素。

拖放文件时 `datatransfer.files` 为空，通常是因为未正确阻止默认行为或误用 `filelist` 赋值方式；关键在于必须在 `dragover` 和 `drop` 事件中调用 `e.preventdefault()`，并直接赋值整个 `datatransfer.files`（只读 `filelist`）给 `` 元素。

在实现文件拖放（Drag & Drop）功能时，一个常见误区是试图修改 <input type="file"> 元素的 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（<15.4）或追求 100% 规范兼容，可改用 DataTransferItem.getAsFile() + 构造 DataTransfer 模拟上传，但对大多数现代项目而言，直接赋值 files 是简洁、高效且经过充分验证的方案。