我已经看到了很多关于输入文件元素第二次在同一个文件中没有触发onchange事件的问题，但是我的情况不是这样的。当选择了一个不同的文件**时，我的onchange处理程序也没有触发。
我选择了一个文件，然后如果我尝试选择另一个文件，它就不工作了。文件选择对话框出现，我选择了我的（不同的）文件，就这样了。onchange处理程序，第一次被调用，不会再被调用。当我选择文件时，什么也不会发生。
下面是我的JS：<input type="file" id="my-input" name="my-input" class="hidden" />
(on 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.
}我也尝试过在handleFile方法中重新添加onchange（例如，将$("#my-input")[0].onchange = onSelectedFileChange;复制到handleFile方法中），但似乎也不起作用。在我选择了一个文件后，我的输入法的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')
}
}
4条答案
按热度按时间eaf3rand1#
我认为可能还有其他的东西，这是一个问题在这里，因为当在下面的片段警报框是来了每次一个新的文件被选中。
handleFile()函数是否可能第二次中断？zhte4eai2#
而不是使用
您可以使用等效的jquery
或
虽然它们的作用应该大致相同，但奇怪的是，您的代码并没有像以前那样工作。您可以使用."on"对其进行更改，使其也考虑使用
编辑
[0]符号确实选择了底层的DOM元素，这样你就可以使用javascriptonchange（而不是jquery的等价物change()），很可能你在代码中更新了DOM元素（innerHTML或类似的），这导致它从javascript中释放了onchange侦听器。kr98yfug3#
像这样对代码做一点修改
cx6n0qe34#
我的代码和lavish提供的代码片段都有同样的问题。因此，如果lavish的代码片段对其他人有效，那么一定是浏览器的问题。也许Chrome的输入文件类型有问题？
我检查的内容：
console.log($('#input')[0].files[0])提供了一个附加到输入的文件列表，使用$('#input').val('').empty()可以明确清除该列表。因此，即使每个方法都重置了所有内容，我的Chrome版本（win11）也不会触发第二个onChange。
相反，我一直在寻找onchange的替代品，并发现oninput可以完成这项工作。
只需将onchange替换为oninput..问题解决。