HTML 输入文件 onchange 不会为不同的文件触发第二次

Question

我已经看到很多关于输入文件元素第二次未触发 onchange 事件的问题 使用同一文件 ，但我的情况并非如此。我的 onchange 处理程序未被触发 当另一个文件也被 selected 时。

我select一个文件，然后如果我尝试select另一个文件，它就是行不通。文件 selection 对话框出现，我 select 我的（不同的）文件，仅此而已。第一次调用的 onchange 处理程序不会再次调用。当我 select 文件时没有任何反应。

这是我的 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.
}

我也尝试过在 handleFile 方法中重新添加 onchange（例如，将 $("#my-input")[0].onchange = onSelectedFileChange; 复制到其中），但它似乎也不起作用。在我 select 一个文件之后，我的输入法的 onchange 属性被设置为空，即使我再次明确设置它，它仍然是空的。

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

更新： 这是 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").onchange = onSelectedFileChange;

Answer 2

而不是使用

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

您可以使用 jquery 等效项

$("#my-input").change(function)

或

$("#my-input").on('change',function)

尽管所有这些都应该做大致相同的事情，但奇怪的是您的代码没有按原来的方式工作。您可以使用“.on”更改它，这样它也可以使用

考虑动态添加的元素

$("body").on('change', '#my-input', onSelectedFileChange);

编辑

[0] 符号确实选择了基础 DOM 元素，这样您就可以使用 javascripts onchange（而不是 jquery 等价物 change()). 很可能在您的代码中您更新了 DOM 元素（innerHTML 或类似元素），这导致它从 javascript.

松开 onchange 侦听器

Answer 3

我认为这里可能还有其他问题，因为在下面的代码片段中每次选择新文件时都会出现警告框。

$("#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() 函数是否可能第二次中断？

HTML 输入文件 onchange 不会为不同的文件触发第二次

HTML input file onchange not triggering second time for different file

javascript

html

file-upload

html-input

编辑