输入文件onchange事件未触发

Question

每次选择文件时，我都会尝试触发onchange事件。如果我选择的文件不同，它会触发，但是，即使选择了两次相同的文件，我也想触发。

HTML

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

成分<​​/ P>

onChange(event: any) {

        var files = event.srcElement.files;
        this.files = files;

        event= null;
}

Answer 1

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

onclick="this.value = null"

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

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

以下是一个工作示例：plnkr

Answer 2

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

您需要使用JS的本机onclick

<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/>