javascript - bootstrap 4 输入文件上传不会在输入中显示上传的文件名??如何使用 Angular 解决

Question

在 Angular 组件中，我使用了 bootstrap 4 输入文件标签，但在选择它之后不会显示所选文件名来代替“选择文件”。

那么，如何使用angular或css在input标签中显示选中的文件名呢？

Answer 1

您的 HTML 文件应包含以下内容:

    <input type="file" id="ifile" class="form-control" #fileInput (change)="preUpload($event)" />
    <label class="custome-file-label" *ngIf=!isFileChosen>Choose file</label>
    <label class="custome-file-label" *ngIf=isFileChosen>{{fileName}}</label>

您可以在 component.ts 文件中编写以下方法:

isFileChosen:boolean = false;
fileName: string = '';
preUpload(event){
  let file = event.target.files[0];
  if (event.target.files.length > 0){
  this.isFileChosen = true;
  }        
  this.fileName = file.name;
}

如果您要上传一些文件，那么计数将大于 0，您将能够显示您的姓名而不是选择文件标签。

请查看工作示例 here