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>
-
You can't, take a look at my answer to this questionelclanrs– elclanrs2012-07-08 20:35:36 +00:00Commented Jul 8, 2012 at 20:35
-
This has nice answers/hacksJashwant– Jashwant2012-07-08 21:02:52 +00:00Commented Jul 8, 2012 at 21:02
-
@elclanrs - Thanks for the help. Its a nice approach to styling file input control with jQuery.Sunil– Sunil2012-07-08 21:05:23 +00:00Commented Jul 8, 2012 at 21:05
Add a comment
|
3 Answers
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");
})
3 Comments
Jashwant
I dont think its possible to trigger
click cross browser (security reasons). Also, changing opacity to 0 shouldnt affect its clicking ability.
Ram
@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.
elclanrs
click is actually the only event that works across browsers. change on the other hand has some problems.You can't. The button part is browser specific.
Comments
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
