我想在用户选择文件时触发一个事件。如果用户每次都更改文件,则使用.change事件执行此操作。
.change
但是,如果用户再次选择相同的文件,我希望触发该事件。
1.用户选择文件A.jpg(事件触发)1.用户选择文件B.jpg(事件触发)1.用户选择文件B.jpg(事件不激发,我希望它激发)
A.jpg
B.jpg
我该怎么做呢?
7gyucuyw1#
每次用户单击控件时,您只需将文件路径设置为空即可。现在,即使用户选择相同的文件,也会触发onchange事件。
<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />
cgyqldqp2#
你可以骗过它。删除文件元素并将其添加到change事件的相同位置。它将擦除文件路径,使其每次都可以更改。
change
Example on jsFiddle.
或者您可以简单地使用.prop("value", ""),参见this example on jsFiddle。
.prop("value", "")
prop
attr
f0ofjuux3#
如果你试过.attr("value", "")但不起作用,不要惊慌(像我一样)
.attr("value", "")
只需执行.val(""),就可以正常工作
.val("")
qv7cva1a4#
每次用户点击字段时,使用onClick事件清除目标输入的值。这确保了同样的文件也会触发onChange事件。对我很管用:)
onInputClick = (event) => { event.target.value = '' } <input type="file" onChange={onFileChanged} onClick={onInputClick} />
使用打字稿
onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => { const element = event.target as HTMLInputElement element.value = '' }
35g0bw715#
以下是我发现的对我有效的React方式解决方案:
onClick={event => event.target.value = null}
5条答案
按热度按时间7gyucuyw1#
每次用户单击控件时,您只需将文件路径设置为空即可。现在,即使用户选择相同的文件,也会触发onchange事件。
cgyqldqp2#
你可以骗过它。删除文件元素并将其添加到
change
事件的相同位置。它将擦除文件路径,使其每次都可以更改。Example on jsFiddle.
或者您可以简单地使用
.prop("value", "")
,参见this example on jsFiddle。prop
attr
f0ofjuux3#
如果你试过
.attr("value", "")
但不起作用,不要惊慌(像我一样)只需执行
.val("")
,就可以正常工作qv7cva1a4#
每次用户点击字段时,使用onClick事件清除目标输入的值。这确保了同样的文件也会触发onChange事件。对我很管用:)
使用打字稿
35g0bw715#
以下是我发现的对我有效的React方式解决方案:
onClick={event => event.target.value = null}