为什么我无法使用打字稿伪造 <a> link 为 <input type=file> 打开文件对话框

Question

这是我的情况、代码和来自 Whosebug 的参考资料。

我想触发打开的对话框，我找到了参考，但它们似乎不起作用；

首先是我的代码片段：

                <i class="fas fa-upload uploadicon"></i><br>
                Drop document here or 
                <a href="javascript:;" class="dropimgmessage" id="uploadLink" name="uploadLink" ngbTooltip="Click to upload a document or drag here!" placement="top">browse</a>
                <input type="file" class="form-control fileuploader" #fileInput  id="api-file-container" formControlName="docUpload" name="api-file-container" (change)="handleFileInput($event.target.files)">
                <span class="dropimagetypemsg">Supports PDF, JPG, PNG, GIF</span>

现在我的打字稿：

declaration of variables:

public uploadlink: HTMLElement;
public fileinput: HTMLElement;

------

ngAfterViewInit() {

    this.uploadlink = document.querySelector('#uploadLink') as HTMLElement;
    this.fileinput = document.querySelector('#api-file-container') as HTMLElement;

    this.uploadlink.addEventListener('click', (e: Event) => {
      e.preventDefault();
      this.fileinput.click();
    });

}

发生的情况是代码触发，但从未进入片段：

this.uploadlink.addEventListener('click', (e: Event) => {

它在 .addEventListener 处停止。

所以我尝试像这样从 HTML 调用函数 onClick。

public fakeFileInput(e: Event): void {

    console.log('Fake Input to File Upload: ', e);
     if(this.uploadlink.getAttribute('text') === 'browse') {
       console.log('EVENT browse upload was click: ');
       this.uploadlink.setAttribute('defaultPrevented', 'false');
       this.fileinput.click();
     }

}

像这样将调用添加到函数中：

<a href="javascript:;" (click)="fakeFileInput($event)" class="dropimgmessage" id="uploadLink" name="uploadLink" ngbTooltip="Click to upload a document or drag here!" placement="top">browse</a>

现在可以了，但是，我在这里收到一个错误：文件选择器对话框只能在用户激活时显示。

我的参考资料：

How to open a file / browse dialog using javascript?

How to make a link act as a file input

在 JSFiddle 上 - http://jsfiddle.net/7aGEv/3/

那么，我哪里错了？

谢谢。

Answer 1

如果堆栈中没有用户交互（由浏览器控制），您无法以编程方式触发文件上传打开。这是浏览器的一项安全功能，可防止恶意网站诱骗用户上传文件。

Answer 2

你不需要任何 JS 来触发没有按钮的文件上传，你可以简单地使用一个标签：

<label for="uploadInput">browse</label>
<input id="uploadInput" type="file" style="display:none" />

为什么我无法使用打字稿伪造 <a> link 为 <input type=file> 打开文件对话框

Why I cannot open file dialog with typescript faking <a> link for <input type=file>

typescript

input-type-file