Question

＆＃13;

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

＆＃13;

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

Answer 1

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

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

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

Answer 2

你可以为输入文件字段声明变量#file＆amp;那么只有文件更改才能调用upload函数将上传的文件传递给函数。

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

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

Answer 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();
}

这对我有用。

Answer 4

在Angular 4中，

HTML：

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
}

打字稿：

Promise

在考虑选择相同文件的未来问题时，在输入标签点击事件中我们将设置为null，这允许相同的文件第二次选择。

Answer 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;
  }

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

5 个答案: