角度输入文件：选择相同的文件答案

【问题标题】：Angular input file: Selecting the same file角度输入文件：选择相同的文件
【发布时间】：2020-04-15 02:01:55
【问题描述】：

我在 HTML 中有以下行：

&lt;input type="file" #fileInput style="display: none"  accept=".xml" (change)="OnFileSelected($event)"/&gt;

选择文件后，将调用 OnFileSelected 回调。但是，如果我再次选择同一个文件，则不会调用此回调。

你能帮忙吗？

【问题讨论】：

【解决方案1】：

onChange 如果选择了相同的文件，则不会检测到输入类型文件的任何更改。有 2 种可能的方法可以让 onChange 处理我推荐的相同文件选择

您需要添加一个像onClick 这样的事件来清除值，以便更改事件起作用。

<input type="file" #fileInput style="display: none" accept=".xml" (change)="OnFileSelected($event)" (click)="this.value=null"/>
给输入元素添加multiple属性

<input type="file" #fileInput style="display: none" accept=".xml" (change)="OnFileSelected($event)" multiple/>

希望这会有所帮助。

编辑：

根据 cmets 中其他人的建议，您可以像下面这样实现它

<input type="file" #fileInput style="display: none" accept=".xml" (change)="OnFileSelected($event)" (click)="$event.target.value=null"/>

【讨论】：

(click)="this.value=null" 这里 this.value 不适合我。但是 (click)="$event.target.value=null" 有效。
谢谢@SupunKavinda (click)="$event.target.value=null" 这个也对我有用

【解决方案2】：

根据 Anand 的回答，我使用了以下代码：

<input type="file" #fileInput style="display: none"  accept=".xml" (change)="OnFileSelected($event)" [(ngModel)]="value"/>

在ts代码中：

  public OnFileSelected (event)
  {
    let fileList: FileList = event.target.files;
    this.value = undefined;
  }

最好的问候，兹维卡

【讨论】：