当值不同时触发 Javascript 更改事件（文件输入）

Question

"Form" 仅客户端交互：

<input type="file" id="file" />

我想避免制作另一个按钮来触发功能，但是：

function handleInput(e) {
    console.log('change occurred', e);

    // read the input with FileReader HTML5 and do stuff
}
var $el = document.getElementById('file');
$el.addEventListener('change', handleInput, false);

当我第一次选择一个文件时，事件触发。如果我再次选择相同的文件，则不会。我应该使用替代事件吗？

Answer 1

'change'事件侦听器只会在输入的值发生变化时触发，因此如果选择了相同的文件，则不会触发任何变化，事件也不会触发。

如果您可以提供更多有关您正在做的事情的背景信息，那么可能还有其他选择。例如，如果您正在创建一个 AJAX 上传器并想对文件输入中的信息做一些事情，那么您就完成了它，您可以随时使用您的监听器函数重置文件输入。这样下一次选择将再次触发更改。

例如：

<script type="text/javascript">
    function handleInput(e) {
        console.log('change occurred', e);
        // Do Something with your input value
        document.getElementById('#file').value = ''; // Reset your input
    }
    var $el = document.getElementById('#file');
    $el.addEventListener('change', handleInput, false);
</script>

Answer 2

如果我将“#file”更改为 "file"（它是一个 id 而不是选择器），您的代码对我有用：

function handleInput(e) {
    console.log('change occurred', e);
}
var $el = document.getElementById('file');
$el.addEventListener('change', handleInput, false);

(在Win7上使用FF 38ESR)

Answer 3

将输入元素包围在表单中，然后执行 form.reset().

有关详细信息，请参阅 How to set a value to a file input in HTML? and How can I clear an HTML file input with JavaScript?。

当值不同时触发 Javascript 更改事件（文件输入）

Trigger Javascript change event when value not different (file input)

javascript

javascript-events