输入文件 onchange 事件未触发答案

【问题标题】：Input File onchange event not firing输入文件 onchange 事件未触发
【发布时间】：2017-07-10 09:34:44
【问题描述】：

我试图在每次选择文件时触发 onchange 事件。如果我选择的文件不同，它会触发，但是，即使同一个文件被选择了两次，我也想触发。

html

  <input name="file" type="file"  (change)="onChange($event)" style="width:80%" />

组件

onChange(event: any) {
   let files = event.srcElement.files;
   this.files = files;
   event= null;
}

【问题讨论】：

你还有很多其他的 DOM 事件。如果更改不符合您的期望，您可以尝试 (input) 或 (select) 或...在此处查看所有 DOM 事件：w3schools.com/jsref/dom_obj_event.asp

【解决方案1】：

您需要清除文件输入的值。就像您选择与值匹配的文件一样，如果值相同则没有更改事件。

需要使用原生的onclick的JS

<input name="file" type="file" onclick="value = null" (change)="onChange($event)" style="width:80%"/>

如果您使用 Angular 的 (click)，那么它将设置 ts 变量 value，这可能会导致错误，因为它不会在您的 ts 文件中声明。

如果你想使用 angualr 的 (click) 事件，那么使用这样的模板变量

<input name="file" type="file" (click)="myInputFile.value = null" (change)="onChange($event)" style="width:80%" #myInputFile/>

【讨论】：

【解决方案2】：

实现这种跨浏览器且无需更改太多代码的最可靠方法是在点击时将输入的值设置为 null。

onclick="this.value = null"

所以你的输入看起来像这样

<input name="file" type="file" onclick="this.value = null" (change)="onChange($event)" style="width:80%"/>

这是一个工作示例：plnkr

【讨论】：