为何自定义input type file时嵌套Click事件无法生效？

嗨，我来帮你搞定这个问题！你的代码逻辑有点小问题：你现在是在点击按钮之后，才给隐藏的文件输入框绑定change事件，但实际上我们需要的是点击按钮时直接触发文件输入框的点击行为，这样才能唤起文件选择窗口。而且change事件应该提前绑定好，不能嵌套在按钮的点击事件里哦。

修正后的完整代码： #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Select Photo</button>
<input type="file" name="photo_input" style="display:none;">

<script>
// 先给文件输入框绑定change事件，监听用户选文件的动作
$('[name=photo_input]').change(function (e) {
  var imagePath = e.target.files[0].name;
  console.log('你选中的文件名是：', imagePath); // 这里可以加你需要的逻辑，比如把文件名显示在页面上
});

// 点击自定义按钮时，触发隐藏的文件输入框的点击事件
$('button').click(function () {
  $('[name=photo_input]').click();
});
</script>

关键的两个修正点： #

• 把change事件的绑定从按钮的click回调里抽出来，这样页面加载完成后，文件输入框就已经监听了文件变化事件，不会出现第一次选文件没反应的情况。
• 按钮的点击事件里，我们要做的是主动调用文件输入框的click()方法，而不是给它绑定事件——这样才能让隐藏的文件输入框触发默认的文件选择窗口。

这样改完之后，点击你的自定义按钮就能正常打开文件选择器，选中文件后也能顺利获取到文件名啦～

内容的提问来源于stack exchange，提问作者Rohit Verma