当选择具有相同名称的文件时,不会触发Javascript文件输入onchange

Question

我的网页上有一个文件输入,允许用户上传图像.

我设置了一些内容,以便在选择图像时触发文件输入的更改事件,并向其显示其图像的预览.

有时一旦他们看到预览,他们就想在本地稍微调整图像(例如使用绘画来裁剪).然后,他们单击画图中的保存并单击文件输入并再次选择该文件.

问题在于,当他们再次选择文件时,即使图像数据已经改变,也不会触发输入的更改事件,并且如果他们尝试将文件上载到我的服务器,则使用旧的图像数据.

有没有办法检测用户何时实际选择文件,而不是发生文件输入更改事件,以便我可以很好地处理案例？

编辑:请注意,我可以在每次用户选择图像时删除并重新创建文件输入,但这意味着文件输入显示"没有选择文件"会使用户感到困惑.

Answer 1

一个简单的解决方案是执行以下操作:

this.input.addEventListener('click', function() {
    this.value = '';
}, false);

这会导致在用户选择文件时触发更改事件,因为打开文件浏览弹出窗口的初始单击会清除输入.