Angular 15中如何在文件输入框显示已上传的文件名？

由于浏览器的安全限制，无法直接修改type="file"输入框的value属性，但可以通过以下几种方案实现仅显示已上传文件名的需求：

方案1：隐藏原生输入框，使用自定义元素展示文件名 #

核心思路是把原生文件输入框隐藏，用自定义的文本元素显示已保存的文件名，点击该元素触发原生输入框的文件选择操作。

模板代码 #

<div class="file-selector">
  <!-- 自定义文件名显示区域，点击触发文件选择 -->
  <span class="file-display" (click)="triggerFileInput()">
    {{ member.fileName || '未选择文件' }}
  </span>
  <!-- 隐藏的原生文件输入框 -->
  <input 
    #fileInput 
    type="file" 
    style="display: none;"
    (change)="handleFileChange($event)"
  />
</div>

组件代码 #

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

// ...

@ViewChild('fileInput') private fileInput!: ElementRef<HTMLInputElement>;
// 从服务器获取的成员数据，包含已上传的文件名
member = { fileName: '团队成员简历.pdf' };

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

handleFileChange(event: Event): void {
  const target = event.target as HTMLInputElement;
  if (target.files?.length) {
    // 更新显示的文件名
    this.member.fileName = target.files[0].name;
    // 执行文件上传逻辑
    this.uploadFile(target.files[0]);
  }
}

private uploadFile(file: File): void {
  // 你的文件上传实现
}

可选样式（美化显示） #

.file-selector {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
}

.file-display {
  color: #333;
}

.file-selector:hover {
  border-color: #666;
}

方案2：使用CSS覆盖原生输入框的显示 #

通过CSS定位和透明度设置，让原生输入框覆盖在自定义标签上，既保留文件选择功能，又用自定义标签展示文件名。

模板代码 #

<div class="custom-file-input">
  <input type="file" (change)="handleFileChange($event)">
  <label>{{ member.fileName || '未选择文件' }}</label>
</div>

CSS代码 #

.custom-file-input {
  position: relative;
  display: inline-block;
}

.custom-file-input input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.custom-file-input label {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

组件代码 #

和方案1的handleFileChange逻辑一致，负责更新文件名和执行上传。

方案3：结合Angular Material的表单组件（若使用Material） #

如果项目依赖Angular Material，可以用MatFormField包装，用只读的MatInput显示文件名，点击时触发隐藏的文件输入框。

模板代码 #

<mat-form-field appearance="fill">
  <mat-label>成员附件</mat-label>
  <input 
    matInput 
    [value]="member.fileName || '未选择文件'" 
    (click)="triggerFileInput()"
    readonly
  />
  <input 
    #fileInput 
    type="file" 
    style="display: none;"
    (change)="handleFileChange($event)"
  />
</mat-form-field>

组件代码 #

同方案1的triggerFileInput和handleFileChange逻辑。

所有方案的核心都是绕过直接修改原生文件输入框的value属性，通过自定义UI元素展示已有的文件名，同时保留原生输入框的文件选择能力，完全符合浏览器的安全规范。

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