html - 如何双击而不是单击以 Angular 打开文件

Question

这是一个拖放文件上传的 Angular 。我可以通过两种方式上传文件:拖放或单击图标并选择并上传文件。

这里拖放不是问题。但是，如果我单击加号图标，它将打开 finder(Windows 中的驱动器)，我可以选择要上传的任何图像或文件。

每当我点击加号图标时，它就会打开取景器。但是我只想在双击图标时打开取景器。如果单击它应该不允许打开取景器。

请在下面找到文件上传的 stackblitz 示例。

stackblitz

<input-file placeholder="Pictures"
            fileAccept="image/*" 
            fileLimit="2"  
            (dblclick)="openFolder()"></input-file>

有人可以帮我做这个吗？

Answer 1

//你可以使用变量“yet”。如果为 true，则进行(单击)else preventDefault

<input-file (click)="click($event)" (dblclick)="openFolder($event)" 
         placeholder="Drop files below!">
</input-file>

在你的 .ts 中

  yet:boolean=false; //A variable
  openFolder($event)
  {
    //create a mouseEvent 
    let event = new MouseEvent('click',{
    view: window,
    bubbles: true,
    cancelable: true
  });
    this.yet=true;  //equal variable to true
    var cancelled = !$event.target.dispatchEvent(event);
     this.yet=false;  //return the value to false
  }
  click($event)
  {
    if (!this.yet) //If variable is false
    {
      $event.preventDefault();
      return false;
    }
  }