Open a file dialog when parent div is clicked using jQuery

Question

I want to open a file dialog when the parent div is clicked. If I click the first parent div, it should only open the first input file.

<div class="fileupload">
    <input type="file" class="file" name="image" />
</div>

<div class="fileupload">
    <input type="file" class="file" name="attachement" />
</div>

see this once http://stackoverflow.com/questions/6460185/cross-browser-open-file-browse-dialog — Anshu, Jan 02 '13 at 10:21

score 10 · Accepted Answer · answered Jan 02 '13 at 10:21

10

Just trigger the click event on the input element:

$('.fileupload').click(function(e) {
    $(this).find('input[type="file"]').click();
});

$('.fileupload input').click(function(e) {
    e.stopPropagation();
});

Demo: http://jsfiddle.net/EctCK/

answered Jan 02 '13 at 10:21

Blender

289,723
53
439
496

Thanks for the reply, When i try this, i'm getting this error 'Uncaught SyntaxError: Unexpected token } ' – user1915190 Jan 02 '13 at 10:29
@user1915190: That's a syntax error somewhere in your script. – Blender Jan 02 '13 at 10:30
When I click the div, my browser is crashed – user1915190 Jan 02 '13 at 10:35
My scenario was a little different but this answer really helped me to shape my code. – zeeshan Jan 25 '14 at 13:42

score 0 · Answer 2 · answered Jan 02 '13 at 10:31

0

Try using trigger(),

$(document).ready(function() {
    $(this).parents(".fileupload").find("input[type='file']").trigger('click');
});

answered Jan 02 '13 at 10:31

Swarne27

5,521
7
26
41

Thank you, When I click the parent div, my browser got crashed – user1915190 Jan 02 '13 at 10:37
try again and try with other browsers – Swarne27 Jan 02 '13 at 10:37

Open a file dialog when parent div is clicked using jQuery

2 Answers2