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);
        }
});

Rahul Singh · Accepted Answer · 2015-10-11 04:46:01Z

2

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>

edited Oct 11, 2015 at 4:46

answered Oct 8, 2015 at 17:56

Rahul Singh

21.8k6 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anonymously Over a year ago

Now I put html tags out of <form runat="server"> tag so its worked perfect. could you tell me the reason behind this why Its working outside form tag. if I upload file on server side I need all that controls inside form tag.

Anonymously Over a year ago

no I am not create any master pages yet. I am working with single aspx page here is my snap shot hope this will describe you my problem in detailed onedrive

Rahul Singh Over a year ago

@Anonymously - Hey check my update and let me know in case of any issues.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related