javascript - 输入文件选择不会一致触发更改事件

Question

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

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();

Answer 1

未触发更改事件，因为如果未清除文件输入值并且用户再次选择同一文件，则不会发生任何更改。读入文件后，使用以下命令清除文件输入值:

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

这将确保如果用户再次选择同一文件，则更改事件将触发，因为该值现已重置。