HTML输入文件onchange不会再次触发其他文件

Question

我已经看到许多有关输入文件元素onchange第二次不触发同一文件事件的问题，但我的情况并非如此。选择其他文件时，我的onchange处理程序未触发。

我选择了一个文件，然后，如果我尝试选择另一个文件，它将无法正常工作。出现文件选择对话框，我选择了（不同的）文件，仅此而已。onchange第一次调用的处理程序不再被调用。选择文件后什么都没有发生。

这是我的JS：

<input type="file" id="my-input" name="my-input" class="hidden" />

（在jQuery上）： $("#my-input")[0].onchange = onSelectedFileChange;

function onSelectedFileChange(e) {
    file = e.target.files[0];
    handleFile(); //my code that processes the file, has nothing to do with the input element.
}

我也尝试过重新添加onchangein handleFile方法（例如，复制$("#my-input")[0].onchange = onSelectedFileChange;到其中），但是它似乎也不起作用。选择文件后，输入法的onchange属性设置为null，即使我再次显式设置它，它也仍然保持null。

为什么会这样呢？这恰好是跨浏览器的情况。

更新：这是handleFile方法：

//file is in the global scope, from the previous method
function handleFile() {
    var lowerName = file.name.toLowerCase();
    if (lowerName.endsWith('.pdf') || lowerName.endsWith('.doc') || lowerName.endsWith('.docx')) {
        $("#file-name").text(file.name);
    } else {
        file = null;
        alert('Please select a valid file')
    }
}

（问题和已接受答案的拒绝者都可以合作解释为什么他们拒绝了吗？）

Answer 1

我认为这里可能还有其他问题，因为每当选择一个新文件时，在下面的摘录中都会出现警报框。

$("#my-input")[0].onchange = onSelectedFileChange;

function onSelectedFileChange(e) {
    file = e.target.files[0];
    alert('new file');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="my-input" name="my-input" class="hidden" />

handleFile()函数是否有可能第二次中断？