如何将整个页面设为文件拖拽区域并绑定指定file输入框？

你可以通过监听整个文档的拖拽事件，将拖拽的文件传递给目标文件输入框，具体实现如下：

完整代码示例 #

<!-- 可将原文件输入框隐藏，无需保留点击选择的交互 -->
<input type="file" name="file" id="file" style="display: none;">

<script>
const fileInput = document.getElementById('file');

// 阻止文档默认拖拽行为，避免浏览器直接打开文件
document.addEventListener('dragover', (e) => {
  e.preventDefault();
});

// 处理文件拖拽放下逻辑
document.addEventListener('drop', (e) => {
  e.preventDefault();
  // 获取拖拽的文件列表
  const draggedFiles = e.dataTransfer?.files;
  if (draggedFiles && draggedFiles.length > 0) {
    // 将拖拽文件赋值给目标输入框
    fileInput.files = draggedFiles;
    // 手动触发change事件，确保依赖该事件的上传逻辑正常执行
    fileInput.dispatchEvent(new Event('change'));
  }
});
</script>

关键逻辑说明 #

• 阻止默认行为：在dragover事件中调用preventDefault()是核心前提，否则浏览器会直接处理拖拽文件（如打开图片、下载文档），且不会触发drop事件。
• 传递拖拽文件：通过e.dataTransfer.files获取拖拽的文件集合，直接赋值给目标输入框的files属性，完成文件的传递。
• 触发change事件：如果你的上传逻辑依赖文件输入框的change事件，手动触发该事件可保证原有流程不受影响。

内容的提问来源于stack exchange，提问作者David