javascript - 当他们选择同名的文件时，不会触发 Javascript 文件输入 onchange

Question

我的网页中有一个文件输入，允许用户上传图像。

我进行了设置，以便当他们选择图像时，会触发文件输入的更改事件并向他们显示图像的预览。

有时，一旦他们看到预览，他们想在本地稍微调整一下图像（例如，使用绘画来裁剪它）。然后他们点击 save in paint 并点击文件输入并再次选择文件。

问题是当他们再次选择文件时，即使图像数据已更改并且如果他们尝试将文件上传到我的服务器，则不会触发输入的更改事件，并且使用旧的图像数据。

有什么方法可以检测用户何时实际选择文件，而不是何时发生文件输入更改事件，以便我可以很好地处理这种情况？

编辑：请注意，每次用户选择图像时，我都可以删除并重新创建文件输入，这很有效，但这意味着文件输入显示“未选择文件”，这让用户感到困惑。

score 7 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

而不是弃用的.addEventListener()尝试.bind()

2 回答 2