如何检测type为file的<input>标签点击？判断文件选择按钮是否被点击

你无法直接选中浏览器原生渲染的内置「Choose File」按钮，该按钮属于<input type="file">内部的shadow DOM节点，直接给外层input元素绑定事件即可捕获按钮的点击动作，可行方案如下：

• 基础方案：直接绑定click事件
  点击内置按钮的动作会触发整个input元素的click事件，直接绑定即可监听，示例代码：

const fileInput = document.getElementById('excel_file');
fileInput.addEventListener('click', function() {
  // 自定义触发逻辑
  console.log('文件选择按钮已被点击，文件选择器已唤起');
});

该方案不受你给input设置的color:transparent样式影响，只要元素未被设置disabled属性且可交互，事件监听就可以正常生效。

• 进阶方案：搭配事件判断用户后续操作
  如果需要进一步区分用户最终是选择了文件，还是直接关闭了选择框没有选文件，可以组合click、change、focus三个事件做判断：

const fileInput = document.getElementById('excel_file');
let isSelectorOpen = false;

// 监听点击，标记选择框已打开
fileInput.addEventListener('click', () => {
  isSelectorOpen = true;
});

// 监听文件选择
fileInput.addEventListener('change', (e) => {
  if (isSelectorOpen) {
    console.log('用户已选择文件，文件列表：', e.target.files);
    isSelectorOpen = false;
  }
});

// 选择框关闭后input会重新获得焦点，此时如果isSelectorOpen还是true，说明用户未选择文件直接关闭
fileInput.addEventListener('focus', () => {
  setTimeout(() => {
    if (isSelectorOpen) {
      console.log('用户关闭了选择框，未选择任何文件');
      isSelectorOpen = false;
    }
  }, 300);
});

加setTimeout是为了兼容部分浏览器的焦点触发时序问题，避免误判。

内容的提问来源于stack exchange，提问作者WEI ZHUANG GOH