Question

这是一个按角度上传和拖放的文件。我可以通过两种方式上传文件，即拖放或单击图标，然后选择并上传文件。

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

只要我单击加号图标，它就会打开取景器。但是我只想在双击图标时打开取景器。如果单击，则不允许打开查找器。

请找到以下用于文件上传的stackblitz示例。

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

任何人都可以帮助我做到这一点吗？

Answer 1

//您可以使用变量“还”。如果为true，请点击（单击其他）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;
    }
  }

Answer 2

一个快速的技巧是仅检查点击事件的时间：

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

。

private lastClick: number

openFolder () {
    const now = Date.now()

    // replace 1000 with whatever maximum interval you want to count as a double click
    if (now - this.lastClick < 1000) {
        // open the folder
    } else {
        this.lastClick = now
    }
}

Answer 3

您可以尝试在按钮的dataset对象上存储按钮状态：

export class AppComponent { 
  button;

  click(ev) {
    if (ev.target.tagName === 'INPUT') {
      !this.button && (this.button = ev.target);
      if (!this.button.dataset.allowClick) {
        ev.preventDefault();
      }
      else {
        delete this.button.dataset.allowClick;
      }
    }
  }

  dblclick(ev) {
    this.button.dataset.allowClick = true;
    this.button.click();
  }
}

HTML：

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

STACKBLITZ

如何用双击而不是单击来打开有角度的文件

3 个答案: