输入文件on Change事件未启动

Question

我每次选择文件时都在尝试启动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;
}

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

Answer 3

我通过在单击事件上设置$ event.target.value =''已解决了此问题

<input type="file" name="file" id="File" aria-label="File" class="file" (click)= "$event.target.value = ''"
          (change)="uploadData($event)" accept=".csv, .xlsx">

这对我有用，您现在可以多次上传同一文件。