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

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，并且您将能够显示您的姓名而不是“选择文件”标签。

请在这里查看工作示例