javascript - 文件输入转换按钮转换为 Angular 中带有文件名的上传按钮
问题描述
I want to upload a file with a browse button and when the file is selected the browse button should go away and instead an upload button should come adjacent to the file name selected.
我应该如何在 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 - 如何在不影响其余页面样式的情况下加载带有样式的 HTML 文件?
- json - 使用 Flutter 从 Firebase DataSnapshot 获取嵌套的 JSON
- c# - C# Wpf 绑定类型适配器
- r - R Shiny:模态中的反应值不起作用
- clojure - 在clojure上更改地图上的值的正确方法
- drupal - Gatsby / Drupal 8 - 使用媒体模块时获取图像(Acquia Lightning 安装)
- vue.js - 如何在 Vue 应用程序中访问 chrome.storage.sync 外部扩展?
- sql - 此查询如何在 SQL Server 中工作(通过访问)?
- azure - 在 MS Azure AD 中,我正在尝试配置 SSO,但 SSO 选项未显示在所选企业应用程序下
- windows - 不用安装openssl.exe能用吗?