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. }

我也尝试在onchange方法中重新添加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

我认为这里可能存在其他问题，因为每当选择新文件时，下面的片段警报框就会出现。

＆＃13;

$("#my-input")[0].onchange = onSelectedFileChange;

function onSelectedFileChange(e) {
    file = e.target.files[0];
    alert('new file');
}

＆＃13;

<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" />

＆＃13;

handleFile()功能可能会第二次破坏吗？

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").onchange = onSelectedFileChange;

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

3 个答案:

修改