防止浏览器加载拖放文件

Question

我正在向我的页面添加一个 html5 拖放上传器。

将文件放入上传区域时，一切正常。

但是，如果我不小心将文件放在上传区域之外，浏览器会加载本地文件，就好像它是一个新页面一样。

我怎样才能防止这种行为？

谢谢！

原文由 Travis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将事件侦听器添加到调用 preventDefault() 的窗口，以处理所有 dragover 和 drop 事件。

例子：

 window.addEventListener("dragover",function(e){
  e = e || event;
  e.preventDefault();
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
},false);

原文由 Digital Plane 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

经过大量摆弄之后，我发现这是最稳定的解决方案：

 var dropzoneId = "dropzone";

window.addEventListener("dragenter", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
}, false);

window.addEventListener("dragover", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
});

window.addEventListener("drop", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
});

 <div id="dropzone">...</div>

在窗口上无条件地设置 effectAllow 和 dropEffect 会导致我的放置区不再接受任何 dnd，无论属性是否设置为新的。

原文由 Axel Amthor 发布，翻译遵循 CC BY-SA 3.0 许可协议