jQuery.trigger('click') does not work in my code

Question

I want the file explorer to pop up for user selecting files when user click a button which is a <input id="J_upload_btn" type="button" />.

However the source above only works well on Firefox 4. On Chrome 11/12 and Firefox 3, the selecting-file-box pops up only after you click the button several times. My jQuery version is 1.5.2.

$('#J_upload_btn').click(function() {
    var _id = new Date().getTime(),
        _$form = $('#J_pic_form'),
        _$input = $('<input id="' + _id + '"' +
                  ' type="file" name="file" class="hide_input">');
    _$form.append(_$input);
    _$input.trigger('click');
    }
});

There are two closing `}` (curly braces) in this code; this would yield an error in most JavaScript parsers. Did you accidentally add the second closing curly brace in this question, or is it in your code as well? — phihag, Jun 04 '11 at 10:59
@Amr: He may not have gotten acceptable answers to his previous six questions. I just looked at [the one with the most answers](http://stackoverflow.com/questions/4520887/how-to-get-the-primary-key-of-last-updated-record-in-mysql) (4), and didn't think any of them really answered what he asked (so I did). — T.J. Crowder, Jun 04 '11 at 10:59
possible duplicate of [In JavaScript can I make a "click" event fire programmatically for a file input element?](http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e) — phihag, Jun 04 '11 at 11:24

score 2 · Answer 1 · edited May 23 '17 at 12:19

Unmatched closing curly brace. Just removing it should work.
You cannot reliably access DOM elements before the DOM tree is created. If this code is not wrapped in a function and called after that is the case, simply wrapping it in $(function(){ /* code */ }); is enough for jQuery to call it as soon as the DOM is ready.
In some browsers (including Firefox 3), triggering click events on <input type="file"> elements is restricted for security reasons.

This code works for me in Chrome:

$(function() {
    $('#J_upload_btn').click(function() {
        var _id = new Date().getTime(),
            _$form = $('#J_pic_form'),
            _$input = $('<input id="' + _id + '"' +
                        ' type="file" name="file" class="hide_input">');
        _$form.append(_$input);
        _$input.trigger('click');
    });
});

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

This kind of input is more restricted than others, by security issues. Sure there's a more current method, but the most common method to do this is using an invisible input (with opacity 0, not display:none), and placing a fake button over it, so when you click on the fake button, you're also clicking on the invisible input.

edited May 23 '17 at 11:48

Community

1
1

answered Jun 04 '11 at 10:59

mariogl

1,195
1
10
24

@mariogl I can't find any mentioning of such magic in the HTML5 standard, and I don't know any browser (apart for the EOLAS plugin behavior, and *maybe* NoScript) that would implement it. I do know a couple of strange limitations like this in Flash, but that's it. I'd love to know sources that describe this kind of behavior in detail. – phihag Jun 04 '11 at 11:13
@phihag which behavior? the one I'm describing? – mariogl Jun 04 '11 at 11:17
@mariogl Yes, the security issues. I'm very sorry, but you were totally right about it. Mea culpa. – phihag Jun 04 '11 at 11:19
Ok, but I'm surprised that in firefox 4 you actually can trigger click on this element. Is that something that new browsers are solving? – mariogl Jun 04 '11 at 11:26
@mariogl As I mentioned in my answer, it works in chrome, too. I guess just a file dialog by itself is not a security problem; the user still can cancel it or select a random, uninteresting file. – phihag Jun 04 '11 at 11:28

score 0 · Answer 3 · answered Jun 04 '11 at 10:59

0

You may want to try not wrapping the input as a jayesh object. If you pass the HTML string to append, then the browser should add a new input field too.

var input = "<input id='"+id+"' />";
_$form.append(input);

Also, have you tried debugging the click in a console to make sure that it is getting fired or the subsequent code has the issue?

answered Jun 04 '11 at 10:59

Scott Harwell

7,457
2
28
41

*"You may want to try not wrapping the input as a jayesh object."* Doesn't matter, `append` accepts both. – T.J. Crowder Jun 04 '11 at 11:04

score 0 · Answer 4 · answered Jun 04 '11 at 11:00

0

If you are tiggering click on the input, a function is expected to run. But as far as I can see, you have not written any function for the click event of _$input.

answered Jun 04 '11 at 11:00

afaolek

8,452
13
45
60

1

As he said, he's trying to cause the browser's default behavior (opening a file browser). – T.J. Crowder Jun 04 '11 at 11:05

jQuery.trigger('click') does not work in my code

4 Answers4