如何从角度 2 中的按钮单击触发输入文件的单击事件？

Posted 2023-03-22

【中文标题】如何从角度 2 中的按钮单击触发输入文件的单击事件？

【英文标题】：how to trigger click event of input file from button click in angular 2?

【发布时间】：2016-09-16 03:38:16

【问题描述】：

<input type="file" accept="image/*">

<button>Upload file</button>

如何从Angular 2中按钮的点击事件触发输入类型=文件的点击事件？

【参考方案1】：

您可以按如下方式利用模板引用变量：

<input type="file" accept="image/*" #file>
<button (click)="file.click()">Upload file</button>

对应的plunkr在这里https://plnkr.co/edit/JB4HY0oxEUgXXIht2wAv?p=preview

【讨论】：

使用安全吗？ 2018 年，单击文件输入将以编程方式在桌面和移动设备上的不同浏览器上运行。

【参考方案2】：

您可以将输入文件字段的变量声明为#file，然后只有文件更改才会调用upload 函数将上传的文件传递给函数。

<input #file type="file" accept="image/*" (change)="upload(file.files)">

<button #upload (click)="file.click()">Upload file</button>

【参考方案3】：

在 Angular 4 中，

html：

<ion-input type="file" formControlName="avatar"></ion-input>
<button type="button" ion-button (click)="selectFile()"></button>

javascript：

selectFile() 
    let element: HTMLElement = document.querySelector('input[type="file"]') as HTMLElement;
    element.click();

这对我有用。

【讨论】：

据我所知，这是离子的

在我看来，这是一个很好的解决方案，而不是使用 Angular 模板引用变量。但是，如果输入在不同的打字稿文件中，我如何调用 let element: HTMLElement = document.querySelector('input[type="file"]') as HTMLElement。

【参考方案4】：

在 Angular 4 中，

HTML：

<input #fileUpload type="file" (click)="fileUpload.value = null"(change)="importFile($event)" style="display:none"
accept="image/*">
<button (click)="fileUpload.click()">  </button>

打字稿：

importFile(event) 

if (event.target.files.length == 0) 
   console.log("No file selected!");
   return

  let file: File = event.target.files[0];
  // after here 'file' can be accessed and used for further process

考虑到以后选择同一个文件不起作用的问题，在输入标签点击事件中我们设置为null，这允许同一个文件第二次选择。

【参考方案5】：

如果你想优雅地显示上传文件的名称，你可以这样写。

<div style="display:flex; flex-direction: row;">
  <input type="text" disabled value="fileName">
  <button (click)="fileInput.click()">File Upload </button>
  <input #fileInput type="file" (change)="onChange($event)" style="display:none"/>
</div>

在您的 TS 文件中，您必须进行以下更改

  fileName: string = "";
  onChange(event) 
    this.fileName = event.target.files[0].name;