jQuery .on('change', function() {} not triggering on asp.net Fileupload control

Question

I have a Fileupload control and an img tag in my aspx page where I can upload image and show in img tag.

<asp:FileUpload ID="f_UploadImage" runat="server" />
    <br />
<img id="myUploadedImg" alt="Photo" style="width: 180px;" />

I am not using HTML input tag for some reasons. By using below code I am accessing fileupload change trigger which is work fine while clicking on Choose File option.

<script type="text/javascript">
$("#f_UploadImage").on('change', 'input', function () {
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function () {
                sendFile(file);
            };
            img.onerror = function () {
                alert("Not a valid file:" + file.type);
            };
            img.src = _URL.createObjectURL(file);
        }
});
</script>

Problem is: When I put another HTML button id ( btn_upload ) in my aspx page and when click on that button I enable access to fileupload click event but when I choose file my File Upload on change trigger not fire. Below is the code which I was trying with another button.

$("#btn_upload").on('click', function () {
        $('#f_UploadImage').trigger('click');
    });

    $("#f_UploadImage").on('change', 'input', function () {
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function () {
                sendFile(file);
            };
            img.onerror = function () {
                alert("Not a valid file:" + file.type);
            };
            img.src = _URL.createObjectURL(file);
        }
});

Answer 1

Directly bind the change event and it should work:-

$("#f_UploadImage").change(function () {

I have validated this and it's working fine for me.

My Code:

 <asp:FileUpload ID="fuTest" runat="server" />
 <input type="button" id="btnTest" value="Upload" />

JS:

$(document).ready(function () {
    $("input#fuTest").change(function () {
        alert(1);
     });

     $("#btnTest").click(function () {
        $("#fuTest").trigger("click");
     });
});

Update:

Based on your input, your code is not working inside form tag because by default the type of button control is submit , so in your case it is posting the form back to server or in other terms postback is happening and your client code is not working. So to prevent this either in your existing code you can use preventDefault like this:-

$("#btnUpload").click(function (e) {
     e.preventDefault();
     $("#fuImage").trigger("click");
});

\\Or\\

You can make you button type as button, so it will not post the form to server:-

 <button type="button" id="btnUpload">Upload Image</button>