输入文件选择不会一致地触发更改事件答案

【问题标题】：Input file selection doesn't trigger change event consistently输入文件选择不会一致地触发更改事件
【发布时间】：2016-02-09 20:04:47
【问题描述】：

我有一个文件输入框，允许用户从他们的本地文件系统中选择一个文件。然后将该文件读入文本区域。我知道只有在输入字段不再处于焦点时才会发生更改事件。但是，我的应用程序的行为不一致。有时在用户选择文件后输入会正确失去焦点，有时则不会。在用户选择文件后，我不知道如何强制输入失去焦点。我的代码：

HTML：

<div class="form-group pull-left">
   <input type="file" id="scriptFile" class="form-control input-sm inputfile">
   <label for="scriptFile"><div class="glyphicon glyphicon-open"></div><span> Choose a Script&hellip;</span></label>
</div>

Main.js：

$("#scriptFile").change(function(event) {
    var file = event.target.files[0];
    // Just updates the "select a file" button to display the selected file's name.
    $("#scriptFile").next('label').find('span').html(" " + event.target.value.split( '\\' ).pop());
    var reader = new FileReader();
    reader.onload = function(event) {
        editor.setValue(event.target.result);
        editor.clearSelection();
    };
    reader.readAsText(file);
    $('#scriptFile').addClass("selected"); //CSS purposes
    editor.focus();
});

如何确保在用户从本地系统中选择文件后，焦点从输入中移除以正确触发更改事件？

更新：问题与选择相同的文件有关，而不是焦点。文件输入仍然具有旧文件值......并且由于它不是更改，因此不会触发更改事件。所以，现在我需要了解如何使用 jQuery 清除文件输入值。

更新：已解决！需要添加这个以将事件更改为清除值：

$('#scriptFile').closest('form').get(0).reset();

【问题讨论】：

尝试在输入端调用 blur()？

标签： javascript jquery html

【解决方案1】：

on change 事件没有被触发，因为如果文件输入值没有被清除并且用户再次选择相同的文件，则没有发生任何更改。读入文件后，清除文件输入值：

$('#scriptFile').closest('form').get(0).reset();

这将确保如果用户再次选择相同的文件，将触发 on change 事件，因为该值现在已被重置。

【讨论】：