取消按钮重置 Html 输入文件答案

【问题标题】：Cancel button reset Html input file取消按钮重置 Html 输入文件
【发布时间】：2022-01-01 00:56:10
【问题描述】：

我正在开发一个 Angular 8 应用程序。我有一个场景，用户可以选择一个文件并将所选文件显示在具有文件名和大小的容器中。如果用户想删除文件并用另一个文件替换它，用户应该点击取消，这将重置容器和输入元素。

HTML：

<div class="container">
   {{fileName}}
</div>
<input type="file" class="custom-file-input" id="inputGroupFile02" 
       (change)="onSelectFile($event)" accept=".xlsx, .xls, .csv" #fileUpload>
<span class="input-group-text sidebutton" id="">Cancel</span>

.ts

onSelectFile(event: any): void {
  this.selectedFiles = event.target.files;
  let name = event.target.files
  this.previews = [];
  this.fileName = this.selectedFiles[0].name;
}

【问题讨论】：

标签： html angular typescript input

【解决方案1】：

包含此按钮：

<input type="reset" value="Reset">

该按钮将重置所有输入。

【讨论】：