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

Posted 2023-05-08

【中文标题】防止浏览器在 Angular 中加载拖放文件

【英文标题】：Prevent browser from loading a drag-and-dropped file in Angular

【发布时间】：2018-03-30 06:33:59

【问题描述】：

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

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

【参考方案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 看到原始答案和更多讨论

【参考方案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();
    ...
  

【讨论】：

MDN 声明：在 dragstart 以外的事件中为 effectAllowed 赋值无效。

我见过，但我很确定它有效果。如果我错了，请纠正我，但下面的 jsfiddle 示例在 dragover 中使用了 effectAllowed：jsfiddle.net/stevendwood/3sAYn/2