bootstrap 4输入文件上传不会在输入中显示上传的文件名？如何解决使用角度

Question

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

那么，如何使用angular或css在输入标签中显示所选文件名？

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的工作示例