输入文件onchange事件未触发

Question

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

HTML

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

零件

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

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

你需要使用原生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/>

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

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