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

我也试过重新添加 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

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

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