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

谢谢你！

标签： javascriptjqueryhtmlcss

Answer 1

基本上你需要触发按钮点击内的事件。有关触发器 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;">