答案 0 :(得分:9)
有一个很好的库可以处理这个要求,也遵循Marerial Design。见附件链接:
答案 1 :(得分:1)
我遇到了同样的问题,我使用Angular Material对组件进行了个性化设置,而没有外部库并且没有将所选文件的名称反馈给字段:
HTML
<mat-form-field class="columns">
<mat-label *ngIf="selectedFiles; else newFile">{{selectedFiles.item(0).name}}</mat-label>
<ng-template #newFile>
<mat-label>Choose file</mat-label>
</ng-template>
<input matInput disabled>
<button mat-icon-button matSuffix (click)="fileInput.click()">
<mat-icon>attach_file</mat-icon>
</button>
<input hidden (change)="selectFile($event)" #fileInput type="file" id="file">
</mat-form-field>
TS
selectFile(event) {
this.selectedFiles = event.target.files;
}