La funzione onchange di Jquery non viene richiamata sul controllo file nascosto

Question

Voglio chiamare la funzione onchange alla selezione del file o quando il file viene modificato, ma la funzione onchange non viene chiamata perché ho impostato display: none per il controllo file perché io Sto usando definendolo sull'immagine click, non riesco a capire come chiamare sul onchange funzione:

$(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

controlli prego sotto soluzione, funziona benissimo;

$(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">