javascript - 鼠标右键 - 激活输入文件中的粘贴选项

Question

我正在使用 Angular 并开发了一个文件输入。在此输入中，我可以使用 CTRL-V 检测图像粘贴。当我单击输入上的右键时，有没有办法激活粘贴选项？

有人可以帮助我吗？

Demo

代码

@HostListener("paste", ["$event"])

  onPaste(e: ClipboardEvent) {
    let clipboardData = e.clipboardData || (window as any).clipboardData;
    let pastedData = clipboardData.getData("text");
    if (pastedData.includes("data:image")) {
      var binary = atob(pastedData.split(",")[1]);
      var array = [];
      for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      var pasteImages = new Blob([new Uint8Array(array)], {
        type: "image/jpeg"
      });
    } else {
      alert("Select an image in the correct format");
    }
  }

Answer 1

您可以尝试将其添加到粘贴 HostListener 下:

@HostListener("mousedown", ["$event"])
onMouseDown(e) {
  if (e.button === 2) {
    e.target.contentEditable = true;
  }
  // wait just enough for 'contextmenu' to fire
  setTimeout(() => (e.target.contentEditable = false), 20);
}

从输入中删除type=file将允许上下文菜单显示:

<input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">