我想上传一个带有浏览按钮的文件,当文件被选中时,浏览按钮应该消失,上传按钮应该出现在所选文件名的旁边。
我应该如何在 Angular 6 中执行此操作?
这是我到目前为止所做的。制作了首屏。
HTML
<div class="pr-3 pt-2">
<h4>Choose an excel file to upload</h4>
</div>
<div>
<label for="upload" class="file-upload-label">Browse</label>
<input type="file" placeholder="Upload file" accept=".xlsx" (change)="incomingfile($event)" class="file-upload-input" id="upload">
</div>
传入文件事件函数
incomingfile(event) {
this.file = event.target.files[0];
this.filePresent = true;
}
最佳答案
基本逻辑-----> DEMO
HTML:
<div class="pr-3 pt-2">
<h4>Choose an excel file to upload</h4>
</div>
<label *ngIf="!filePresent">
<input #fileInput type="file" (change)="incomingfile($event)" />
<span>Browse File</span>
</label>
<label *ngIf="filePresent">
<label >{{fileName}}</label>
<button (click)="uploadFile()"><span> Upload</span></button>
</label>
TS:
file: File;
filePresent: boolean = false;
fileName: string = ''
incomingfile(event) {
this.file = event.target.files[0];
this.fileName = this.file.name;
this.filePresent = true;
}
uploadFile() {
if (this.file) {
console.log(this.file);
}
}
关于javascript - 文件输入转换按钮转换为 Angular 中带有文件名的上传按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51762719/