Question

＆＃34;表＆＃34;与客户端唯一的交互性：

<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

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

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

Answer 2

＆＃39;变化＆＃39;事件侦听器只会在输入值更改时触发，因此如果选择了相同的文件，则不会触发任何更改，也不会触发事件。

如果您可以提供更多关于您正在做的事情的背景信息，可能还有其他选择。例如，如果您正在创建一个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 3

如果我改变了＃34;＃file＆＃34;

你的代码适合我。进入＆＃34;文件＆＃34; （它的id不是选择器）：

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

（在Win7上使用FF 38ESR）

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

3 个答案: