javascript - open file upload dialog on click - Stack Overflow 5/30/17, 5)27 PM
x Dismiss
Join the Stack Overflow Community
Stack Overflow is a community of 7.2 million
programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
open file upload dialog on click
I have to open file upload dialog by clicking some other button i.e i am hiding file upload control(visibility:hidden) and on clicking of some other
button i want to open that dialog. Below is the code which i am having:
<input type="file" style="visibility: hidden;" />
Below is the javascript:
$('#button').click(function() {
$('input[type=file]').click();
});
It is working fine in Firefox 4 and IE8 but in chrome12 it is not working i.e the dialog is not being opened. Any idea why?
javascript jquery html file-upload
edited Jul 29 '15 at 16:28 asked Jun 9 '11 at 12:32
Rory McCrossan Niraj Choubey
187k 25 157 203 937 12 42 84
3 Answers
Tested today the simple code given in the question and the situation has changed:
IE9: works
Chrome23: works
Firefox15: works
There is just one catch - on IE the .click() is a blocking operation while on other
browsers it is not.
edited Feb 20 '13 at 8:02 answered Nov 16 '12 at 13:51
Knais
14.3k 1 37 64
can you explain more what do u mean by blocking operation? william Jul 4 '13 at 8:58
fileElement.click(); var x = fileElement.value; - on IE this will work as expected, but on other
browsers x will be empty. Knais Jul 4 '13 at 17:43
In your example, your file input did not have an id, yet you are trying to reference it with #input.
https://stackoverflow.com/questions/6292825/open-file-upload-dialog-on-click Page 1 of 2
javascript - open file upload dialog on click - Stack Overflow 5/30/17, 5)27 PM
This works for me:
$('#button').click(function() {
$('input[type=file]').click();
});
answered Jun 9 '11 at 12:38
circusbred
1,166 7 8
Sorry, i removed it. Niraj Choubey Jun 9 '11 at 12:40
1 actually this doesn't work as of now, either from updates to jquery either from browser updates
Nuno Furtado Feb 4 '13 at 15:22
You should position input[file] just above your custom control. And then bind to
it`s onclick.
Also make in it bigger font-size, as only this way you can increase it's height.
answered Jun 9 '11 at 12:36
gaRex
3,078 13 31
https://stackoverflow.com/questions/6292825/open-file-upload-dialog-on-click Page 2 of 2