Jquery onchange函数不会在隐藏文件控件上调用

Question

我想在选择文件或文件更改时调用onchange函数,但是我的onchange函数没有被调用,因为我已经设置了display:none用于文件控制,因为我在图像点击时使用调用它,我无法理解在onchange函数上调用它:

$(document).ready(function() {
  $('#profile-image').on('click', function() {
    $('#photo').click(); // opens up the file dialog for selection of image
  });
});

$("#photo").change(function() {
  alert($(this).val())
});

.hidden_img {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="hidden_img" type="file" name="imagefile" id="photo"/>
<img src="images/btn.jpg" width="148" height="60" alt="btn" id="profile-image">

Answer 1

请检查以下解决方案，它工作正常；

$(document).ready(function() {
  $('#profile-image').on('click', function() {
    $('#photo').click(); // opens up the file dialog for selection of image
  });
});

$("#photo").on('change',function() {
  alert($(this).val())
});

#photo{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="hidden_img" type="file" name="imagefile" id="photo" />
<img src="http://placehold.it/148X60" width="148" height="60" alt="btn" id="profile-image">