如何检测相同文件的输入类型为“文件”的“更改”?

15 浏览
0 Comments

如何检测相同文件的输入类型为“文件”的“更改”?

当用户选择一个文件时,我想触发一个事件。如果用户每次更改文件时使用.change事件,那么可以实现这个目标。

但是我希望当用户再次选择相同的文件时,也能触发该事件。

  1. 用户选择文件A.jpg(事件被触发)
  2. 用户选择文件B.jpg(事件被触发)
  3. 用户选择文件B.jpg(事件不被触发,我希望它能被触发)

我该怎么做呢?

0
0 Comments

问题的出现原因:

问题的原因是当使用input type="file"选择文件后,再次选择同一文件时,change事件不会被触发。这是因为浏览器不允许对同一文件的选择进行change事件的触发,以保护用户的隐私和安全。

解决方法:

有两种解决方法可以解决这个问题。

1. 通过删除文件元素并在change事件中重新添加文件元素,可以欺骗浏览器,使其认为文件已经被更改。这样做会擦除文件路径,使其每次都可以更改。以下是一个使用此方法的示例:




2. 另一种解决方法是使用jQuery的.prop()方法或.attr()方法将文件输入框的值设置为空字符串,以触发change事件。以下是一个使用.prop()方法的示例:




需要注意的是,在使用.attr("value", "")或.val("")(如上面的代码所示)时,Internet Explorer浏览器会触发change事件,而Chrome浏览器不会触发change事件。由于"value"是input的属性而不是属性,因此推荐使用.prop()方法。

通过上述两种解决方法,可以解决在选择同一文件时无法触发change事件的问题。

0
0 Comments

问题的原因是当用户选择同一个文件时,input的change事件不会被触发。解决方法是在用户每次点击input控件时,将文件路径设置为null。这样,即使用户选择相同的文件,change事件也会被触发。

下面是一个实现这个解决方法的示例代码:


这个解决方法非常简洁,能够很好地完成工作。非常感谢Mariusz Wiazowski的聪明思考。

还有另一种解决方法是在input标签发生变化时修改其值。但我们不希望在选择文件后修改其值。

这个方法比在DOM中删除和添加元素要好得多,非常感谢!

我对这个解决方法的问题是,如果用户随后点击取消,这不会触发change事件,至少在Chrome浏览器中是如此。

0
0 Comments

如果您尝试过.attr("value", "")但没有起作用,不要像我一样惊慌失措,只需使用.val("")即可解决问题。

0