Angular获取附件文件名问题：隐藏file-input后change事件不触发

方法1：替换隐藏样式，保留元素可交互性 #

别用display: none隐藏文件输入框，换成视觉隐藏但不影响DOM交互的样式：

.file-input {
  opacity: 0;
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  overflow: hidden;
}

这种方式下，输入框依然存在于DOM中，绑定的(change)事件能正常触发，同时用户看不到它。

方法2：用按钮主动触发隐藏的文件输入框 #

在自定义按钮的点击事件里，直接调用文件输入框的click()方法，确保触发选择操作：

<!-- 自定义按钮 -->
<button type="button" (click)="triggerFileInput()">选择附件</button>
<!-- 隐藏的文件输入框 -->
<input #fileInput type="file" class="file-input" (change)="onFileSelected($event)" multiple>

组件里补充触发逻辑：

import { ViewChild, ElementRef } from '@angular/core';

// 获取文件输入框的DOM引用
@ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;

triggerFileInput() {
  this.fileInput.nativeElement.click();
}

onFileSelected(event: Event) {
  const input = event.target as HTMLInputElement;
  if (!input.files) return;
  
  // 收集选中的文件名，用于表格展示
  const newFiles = Array.from(input.files).map(file => file.name);
  // 合并到附件列表（attachments是组件中存储文件名的数组）
  this.attachments = [...this.attachments, ...newFiles];
  
  // 重置输入框，允许重复选择同一文件
  input.value = '';
}

方法3：用标签关联文件输入框 #

利用<label>的特性：点击label会触发关联的input元素，把自定义按钮样式加到label上，同时隐藏input：

<label class="custom-upload-btn">
  <span>选择附件</span>
  <input type="file" class="file-input" (change)="onFileSelected($event)" multiple>
</label>

给label设置按钮样式：

.custom-upload-btn {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

.file-input {
  opacity: 0;
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  overflow: hidden;
}

表格展示附件列表 #

组件中先初始化附件数组attachments: string[] = []，再用*ngFor渲染表格行：

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>附件名称</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let fileName of attachments">
      <td>{{ fileName }}</td>
    </tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Olivier