在 html 中一次又一次地浏览同一个文件

Question

我的 html 上有以下代码

<input type="file"  style="display: none" #file(change)="processImage($event)" />
<button type="button"  class="btn" (click)="file.click()"  Browse </button>

我从桌面选择 image1，它由processImage() 加载到 html 上，然后我用删除按钮将其删除。然后我再次浏览并再次选择 image1 但没有任何反应，当我选择 image2 时，它被加载，然后我选择 image1 又是加载。总之，再次选择相同的图像没有任何作用，可能不是更改事件。这也是有道理的。但是由于某种原因，用户可能会在加载和删除后一次又一次地加载它。

我如何显示图像：

<div *ngIf="isImageLoaded" class="showImg"><img [src]="myImage"></div>

任何提示可以加载相同的图像并触发processImage()？

Answer 1

您必须清除event.currentTarget.value，如下所示，我在本地尝试过，效果很好。每当您选择任何图像时，即使它重复总是触发processImage 方法。

public processImage(event:any):void{
     //your logic    
     event.currentTarget.value='';
}