防止浏览器在Angular中加载拖放文件

Question

我有一个页面（在Angular 4中），其中有一个拖放组件（ng2-filedrop）。拖放工作正常但是当我拖动文件并将其放在页面中拖放组件的其他部分时，它在该页面中打开文件。

有没有办法禁止文件丢弃到其他地方或是否可以在单独的浏览器选项卡中至少打开文件？

Answer 1

您可以通过覆盖调用dragover以防止浏览器的默认拖放行为的全局drop对象的window和preventDefault()事件来做到这一点。

将以下代码段添加到app.component.ts的ngOnInit()方法中：

ngOnInit(): void {
  window.addEventListener("dragover", e => {
    e && e.preventDefault();
  }, false);
  window.addEventListener("drop", e => {
    e && e.preventDefault();
  }, false);
}

这不是我自己的答案，你可以在Prevent browser from loading a drag-and-dropped file 看到原始答案和更多讨论