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

I want to fire an event when the user select a file. Doing so with .change event it works if the user changes the file every time.

我想在用户选择文件时触发一个事件。如果用户每次修改文件，就可以使用.change事件。

But I want to fire the event if the user select the same file again.

但是，如果用户再次选择相同的文件，我希望触发事件。

User select file A.jpg (event fires)
用户选择文件A.jpg(事件触发)
User select file B.jpg (event fires)
用户选择文件B.jpg(事件触发)
User select file B.jpg (event doesn't fire, I want it to fire)
用户选择file B.jpg(事件没有触发，我想让它触发)

How can I do it?

我怎么做呢?

10 个解决方案

#1

You can trick it. Remove the file element and add it in the same place on change event. It will erase the file path making it changeable every time.

你能欺骗它。删除文件元素并将其添加到更改事件的相同位置。它将删除文件路径，使其每次都可更改。

Example on jsFiddle.

在jsFiddle示例。

Or you can simply use .prop("value", ""), see this example on jsFiddle.

或者您可以简单地使用.prop(“value”，“”)，参见jsFiddle上的示例。

jQuery 1.6+ prop
jQuery 1.6 +道具
Earlier versions attr
早期版本attr

Or use .val("")

或者使用.val(" ")

#2

If you have tried .attr("value", "") and didn't work, don't panic (like I did)

如果你尝试过。attr(“value”，“”)但没有成功，不要惊慌(像我一样)

just do .val("") instead, and will work fine

只要做。val("")就可以了

#3

I got this to work by clearing the file input value onClick and then posting the file onChange. This allows the user to select the same file twice in a row and still have the change event fire to post to the server. My example uses the the jQuery form plugin.

通过清除文件输入值onClick，然后发布文件onChange，我实现了这一点。这允许用户在一行中两次选择相同的文件，并且仍然可以将更改事件触发发送到服务器。我的示例使用jQuery表单插件。

$('input[type=file]').click(function(){
    $(this).attr("value", "");
})  
$('input[type=file]').change(function(){
    $('#my-form').ajaxSubmit(options);      
})

#4

This work for me

这项工作对我来说

<input type="file" onchange="function();this.value=null;return false;">

#5

You can simply set to null the file path every time user clicks on the control. Now, even if the user selects the same file, the onchange event will be triggered.

每次用户单击控件时，只需将文件路径设置为null即可。现在，即使用户选择了相同的文件，onchange事件也将被触发。

<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />

#6

You can't make change fire here (correct behavior, since nothing changed). However, you could bind click as well...though this may fire too often...there's not much middle ground between the two though.

你不能在这里做出改变(正确的行为，因为没有改变)。但是，您也可以绑定click…虽然这可能会经常发生……但两者之间并没有太多的中间地带。

$("#fileID").bind("click change", function() {
  //do stuff
});

#7

If you don't want to use jQuery

如果不想使用jQuery的话

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

It works fine in Firefox, but for Chrome you need to add this.value=null; after alert.

它在Firefox中工作得很好，但是对于Chrome你需要添加this.value=null;在警报。

#8

You can use form.reset() to clear the file input's files list. This will reset all fields to default values, but in many cases you may be only using the input type='file' in a form to upload files anyway. In this solution there is no need to clone the element and re-hook events again.

可以使用form.reset()清除文件输入文件的文件列表。这将把所有字段重置为默认值，但在许多情况下，您可能只使用表单中的输入类型='file'来上传文件。在这个解决方案中，不需要克隆元素并重新挂钩事件。

Thanks to philiplehmann

由于philiplehmann

#9

Well, I had same issue. I used "input" (or oninput) event instead of change and it worked like charm.

我也有同样的问题。我使用的是“输入”(或oninput)事件，而不是变化，它像符咒一样有效。

#10

By default, the value property of input element cleared after selection of files if the input have multiple attributes. If you do not clean this property then "change" event will not be fired if you select the same file. You can manage this behavior using multiple attribute.

默认情况下，如果输入具有多个属性，则在选择文件后清除输入元素的值属性。如果您不清理此属性，则“更改”事件将不会被触发，如果您选择相同的文件。您可以使用多个属性来管理此行为。

<!-- will be cleared -->
<input type="file" onchange="yourFunction()" multiple/>
<!-- won't be cleared -->
<input type="file" onchange="yourFunction()"/>

Reference

参考

#1