I have a file input element as in code below. How would I get the button part of this file input control using jQuery?
<input type="file" name="FILE1" id="FILE1"></input>
Asked
Active
Viewed 165 times
0
-
You can't, take a look at my answer to [this question](http://stackoverflow.com/questions/11337629/how-to-change-input-type-file-design-so-it-wont-display-the-text-field/11337696#11337696) – elclanrs Jul 08 '12 at 20:35
-
[This](http://stackoverflow.com/questions/793014/jquery-trigger-file-input) has nice answers/hacks – Jashwant Jul 08 '12 at 21:02
-
@elclanrs - Thanks for the help. Its a nice approach to styling file input control with jQuery. – Sunil Jul 08 '12 at 21:05
3 Answers
1
that's not possible because file input behavior is under control of the browser and manipulating that causes security-related issues like preventing the file-upload. however you can set the opacity of file input to 0, and create a dummy element instead and trigger the click event for file input by clicking that:
$("#trigger").click(function(e) {
e.preventDefault();
$("input[type='file']").trigger("click");
})
Ram
- 143,282
- 16
- 168
- 197
-
I dont think its possible to trigger `click` cross browser (security reasons). Also, changing opacity to 0 shouldnt affect its `clicking` ability. – Jashwant Jul 08 '12 at 21:01
-
@Jashwant i have used this method for my website and it works in all browsers, but instead of `input[type='file']` an `id` can prevent security problems. – Ram Jul 08 '12 at 21:04
-
`click` is actually the only event that works across browsers. `change` on the other hand has some problems. – elclanrs Jul 08 '12 at 21:06
0
There are a number of questions and answers on this that cover what you can do with a file input. It's not much, but it is something.
Erick
