Почему щелчок не работает, когда я использую вложенный щелчок для настройки дизайна файла типа ввода?

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

в основном вам нужно вызвать событие внутри нажатия кнопки. Подробнее о триггер 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;">