如何像input.Files一样获取拖拽文件并在drop处理函数外使用？

当然可以实现！你只需要把drop事件中拿到的File对象存储在一个**可全局访问的变量（或组件内部状态）**里，就能在事件处理函数结束后随时调用，和使用input的files[0]的体验完全一致。

具体实现步骤 #

• 先声明一个变量用来存放文件对象（根据你的项目场景选择作用域：全局变量、组件状态都可以）
• 在drop事件处理函数中，将获取到的文件赋值给这个变量
• 后续任何需要使用文件的地方，直接访问这个变量即可

代码示例 #

// 声明一个变量存储拖拽文件（如果是框架项目，建议用框架状态替代全局变量）
let draggedFile = null;

// 获取拖拽区域元素
const dropArea = document.getElementById('drop-area');

// 必须阻止dragover的默认行为，否则浏览器会直接打开文件
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.classList.add('dragover'); // 可选：添加拖拽状态样式
});

dropArea.addEventListener('dragleave', () => {
  dropArea.classList.remove('dragover'); // 可选：移除拖拽状态样式
});

// 处理文件拖拽放下事件
dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.classList.remove('dragover');
  
  // 拿到第一个拖拽的文件并存储
  draggedFile = e.dataTransfer.files[0];
  console.log('已保存拖拽文件:', draggedFile.name);
});

// 示例：在外部事件中获取存储的文件
document.getElementById('check-file-btn').addEventListener('click', () => {
  if (draggedFile) {
    console.log('当前存储的拖拽文件信息:', {
      文件名: draggedFile.name,
      大小: `${(draggedFile.size / 1024).toFixed(2)}KB`,
      类型: draggedFile.type
    });
    // 这里可以执行文件读取、预览等操作
  } else {
    console.log('还没有拖拽任何文件哦');
  }
});

注意事项 #

• 一定要在dragover事件中调用e.preventDefault()，否则浏览器会触发默认的文件打开行为，导致drop事件无法正常触发
• 如果是React、Vue等框架项目，不要使用全局变量，建议用框架提供的状态管理（比如React的useState/useRef，Vue的ref/reactive）来存储文件对象，避免全局变量污染
• 存储的draggedFile和input获取的files[0]是完全相同的File对象，支持所有File的属性和方法（比如name、size、type，以及配合FileReader读取文件内容）

内容的提问来源于stack exchange，提问作者John Balvin Arias