拖拽单个文件上传时阻止浏览器自动打开文件的方法咨询

当使用现有拖拽上传脚本时，批量拖拽文件功能正常，但拖拽单个文件时浏览器会自动在新标签页打开文件，只需调整drop事件的处理逻辑即可阻止该默认行为：

修改后的完整代码 #

HTML部分

<!DOCTYPE html>
<html>
<body>
<div id="dropContainer" style="border:1px solid black;height:100px;">
   Drop Here
</div>
  Should update here:
  <input type="file" id="fileInput" multiple />
</body>
</html>

JavaScript部分

const dropContainer = document.getElementById('dropContainer');
const fileInput = document.getElementById('fileInput');

// 阻止dragover和dragenter的默认行为，确保drop事件能触发
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
  evt.preventDefault();
  evt.stopPropagation();
};

dropContainer.ondrop = function(evt) {
  // 同时阻止默认行为和事件冒泡，彻底禁用浏览器打开文件的默认操作
  evt.preventDefault();
  evt.stopPropagation();

  // 将拖拽的文件赋值给fileInput
  fileInput.files = evt.dataTransfer.files;

  // 如果只需要部分文件，可保留以下逻辑（按需启用）
  // const dT = new DataTransfer();
  // dT.items.add(evt.dataTransfer.files[0]);
  // fileInput.files = dT.files;
};

关键修改点 #

• 在drop事件中同时调用evt.stopPropagation()和evt.preventDefault()，彻底阻断浏览器的默认文件打开行为
• 给fileInput添加multiple属性（可选，支持多文件选择，不影响单文件拖拽逻辑）
• 注释掉原代码中仅用于测试的特定文件筛选逻辑，避免干扰正常功能

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