拖放图片到浏览器窗口时，如何禁止浏览器自动打开图片？

完全可以通过JavaScript实现，只需要监听并阻止拖拽相关的默认浏览器行为即可，以下是具体实现：

• 监听dragover事件：阻止默认行为，避免浏览器将页面识别为可放置文件的区域
• 监听drop事件：阻止默认行为，彻底拦截浏览器打开拖拽图片的操作

代码示例 #

// 给整个页面绑定事件，覆盖站点所有区域
document.addEventListener('dragover', (e) => {
  e.preventDefault();
});

document.addEventListener('drop', (e) => {
  e.preventDefault();
  // 可选：添加自定义提示，提示用户该操作不被允许
  console.log('此页面不支持拖拽本地图片打开');
  // 也可以在页面中显示临时提示
  // const alertEl = document.createElement('div');
  // alertEl.style.cssText = 'position:fixed;top:30px;left:50%;transform:translateX(-50%);background:#ffeeee;padding:12px;border:1px solid #ffcccc;border-radius:4px;color:#cc0000;z-index:10000;';
  // alertEl.textContent = '请勿在此页面拖拽本地图片';
  // document.body.appendChild(alertEl);
  // setTimeout(() => alertEl.remove(), 3000);
});

补充说明 #

• 若只想在页面特定区域阻止该行为，可将事件绑定到对应DOM元素（比如页面主容器），而非document
• CSS和HTML无法单独实现此功能，必须借助JavaScript处理事件交互

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