Solution 1 :
basically you need to trigger the event inside the button click.
for more on 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;">
Problem :
I have input type file this click is working file when its default design, but when i try to customize it with another button this is not working.
My Code:-
$('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;">
Thank You!
Comments
Comment posted by Arvind Maurya
$(‘[name=photo_input]’).trigger(‘click’); you need to trigger under the button click.
Comment posted by Rohit Verma
I know its will work fine but i can’t use just trigger(‘click’), I have to click with function like given in my question
Comment posted by Ritesh Khandekar
$('button').click(function () { $('[name=photo_input]').click().change(function (e) { alert(e.target.files[0].name); }); });
Comment posted by Rohit Verma
@Ritesh Khandekar Thank you so much its working fine.
Comment posted by label Tag
@RohitVerma HTML already have same behaviour by default
