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

Question

我有一个页面（在 Angular 4 中），其中有一个拖放组件（ng2-filedrop）。拖放工作正常，但是当我将文件拖放到页面中时，除了拖放之外组件，它会在该页面中打开文件。

有什么方法可以禁止在其他地方放置文件，或者是否可以至少在单独的浏览器选项卡中打开文件？

Answer 1

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

将以下代码 sn-p 添加到您的 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 看到原始答案和更多讨论

Answer 2

下面跟Hoang Duc Nguyen's Answer真的很像
dropEffect 显示悬停时的红十字光标。

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

在组件内使用以下内容。
如果您想区分从用户删除的文件或页面中的删除事件，您可以检查类型。

@HostListener("dragover", ["$event"])
  onDragOver(ev: DragEvent) {
    if (ev.dataTransfer.types.includes("Files"))
      return;
    ev.preventDefault();
    ev.stopPropagation();
    ...
  }