Detect change in hidden input[type="file"]

Question

I have a hidden input[type=file] and a separate button which triggers click on this hidden input. How can I detect the value change in this hidden input, i.e, when the user has selected a file?

<form id="photo_upload_form" method="POST" enctype="multipart/form-data">
    <button >Upload a Photo</button>
    <input name="file" type="file" hidden />
</form>

Javascript:

$('#photo_upload_form button').click(function(){
        $('input[type="file"]').trigger('click');
});
$('input[type="file"]').change(function(){
    alert('Change !');
});

EDIT: My button click submits the form so I had to use a preventDefault !

Is there a simple solution for it? If somehow I can trigger change? — shikharsaxena30
– shikharsaxena30, Commented Dec 15, 2014 at 2:48
Can you show us/explain to us what you have tried so far to achieve what you are wanting? — Turnerj
– Turnerj, Commented Dec 15, 2014 at 2:51
I just used the .change() function. Everything works fine if I dont hide the input field ! Once I do, it doesn't work. — shikharsaxena30
– shikharsaxena30, Commented Dec 15, 2014 at 2:52

Alien · Accepted Answer · 2014-12-15 03:09:28Z

3

using onchange for input[type=“file”]

<input type="file" onchange="myFunction()">

here is demo http://jsfiddle.net/qs4y0rLe/

as your code, change like below

 $('input[type="file"]').on('change',function(){
            alert('Change !');
    });

about jquery .on(), attach an event handler function for one or more events to the selected elements. more --> http://api.jquery.com/on/

http://jsfiddle.net/qs4y0rLe/1/

edited Dec 15, 2014 at 3:09

answered Dec 15, 2014 at 2:48

Alien

3,6761 gold badge18 silver badges35 bronze badges

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

6 Comments

shikharsaxena30 Over a year ago

It is a hidden input field, so the change doesn't automatically trigger, right?

Alien Over a year ago

@user3142839 what you mean hidden input[type=file]?? display:none; or type="hidden" ?

shikharsaxena30 Over a year ago

<input type="file" hidden> or display: none for that matter

Alien Over a year ago

@user3142839 i upgraded my answer, check it

Alien Over a year ago

@user3142839 upgraded my answer

|

zuo · Accepted Answer · 2014-12-15 02:48:03Z

0

It will still trigger change event on the input[type=file], sth like

$("input[type=file]").on('change',function() {});

answered Dec 15, 2014 at 2:48

zuo

1,1111 gold badge12 silver badges27 bronze badges

1 Comment

zuo Over a year ago

@user3142839 what about visibility: hidden

Collectives™ on Stack Overflow

Detect change in hidden input[type="file"]

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related