javascript - 当我使用嵌套单击进行输入类型文件设计自定义时，为什么单击不起作用？

Question

我有输入类型文件，此点击在默认设计时是工作文件，但是当我尝试使用另一个按钮自定义它时，这不起作用。

我的代码:-

  $('button').click(function () {
    $('[name=photo_input]').change(function (e) {
            var imagePath = e.target.files[0].name;
        });
   });

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

谢谢!

Answer 1

基本上，您需要在按钮单击内触发事件。了解更多 trigger API

$('button').on('click',function () {
      debugger;
        $('[name=photo_input]').trigger('click');
   });
   
   $('[name=photo_input]').change(function (e) {
            var imagePath = e.target.files[0].name;
            alert(imagePath);
        });

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