javascript - 如何将 javascript 函数与文件选择器对话框的关闭关联起来？

Question

我正在根据文件选择器的用户输入动态构建文件的选项卡式显示，即显示输入类型=文件

<input type="file" id="selectedFiles" style="display: none;" multiple/>
<input type="image" src="file_select_button_image.png" onClick="buildFileTabs();"/>

问题是，当用户单击文件选择按钮时，会显示文件选择器并调用 buildFileTabs()。 Chromium 浏览器就会出现这种情况。我没有尝试过任何其他浏览器。

如何将 buildFileTabs() 函数与文件选择器对话框的关闭关联起来？

Answer 1

使用onchange事件于 <input type="file" /> .

function showFilePicker() {
    document.getElementById("selectedFiles").click();
}

function buildFileTabs(e) {
    var msg = "Selected "+ this.files.length+" files";
    var div = document.body.appendChild(document.createElement("div"));
    div.innerHTML = msg;
}

<input type="file" id="selectedFiles" style="display: none;" multiple onchange="buildFileTabs.call(this, event)" />
<input type="button" value="file_select_button_image.png" onclick="showFilePicker();"/>