1

I need a <button> element, on which one clicks would trigger a file browsing (ie. the click event of <input type="file">). Is there a way to achieve that without affecting the look of the button?

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
tamakisquare
  • 16,659
  • 26
  • 88
  • 129
  • 1
    Why is this downvoted, for cyring outloud?! –  Jan 03 '13 at 01:11
  • possible duplicate http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input – pna Jan 03 '13 at 01:11
  • 1
    @bvukelic has got a point. It would be greatly appreciated to give out reason when you downvote a post. Otherwise, downvoting becomes a tool to discourage people from asking question, when it should really be a constructive mean to make the community to ask better questions. – tamakisquare Jan 03 '13 at 01:15

2 Answers2

6

You can manually trigger the click event on the file input.

$('button').click(function(e) { 
   e.preventDefault();
   $('input[type=file]').click();
});

Example: http://jsfiddle.net/UxFM4/2/

  • Nice one, I didn't think of that. Have an upvote for dat dislay:none! – Hamed Al-Khabaz Jan 03 '13 at 01:20
  • Interesting. Does this work across the mainstream browsers? I am curious if the solution is this simple and straightforward why are there so many html/css hacks I found on the Internet using ` – tamakisquare Jan 03 '13 at 01:23
  • @tamakisquare: Should work. I've tested in FF and Chrome, and both are happy. Don't have access to IE atm. As for why there are hacks out there, beats me. Maybe it's just not that common of a procedure. –  Jan 03 '13 at 01:25
  • And yeah, sometimes, developers tend to overthink the problem. :))) –  Jan 03 '13 at 01:26
  • This is really interesting, indeed. I remember I used to be not able to programmatically call `click()` on `` element in Chrome but now I CAN! The world has changed too fast I must say. Let I try this in my own code. Thanks. – tamakisquare Jan 03 '13 at 01:38
  • @tamakisquare: There were times when styling just about any form widget was a pain in the butt, you know. :D –  Jan 03 '13 at 01:44
1

Instead of relying on css/html hacks, you can just style the input to match the one as the button.

The type=file is unique and you can't emulate it to look like a button (since buttons take text in the middle, and don't have a type parameter). If you really need to do it, either with javascript or with css to make it look like a button (to hide the path).

Fiddle to crop to make it button only and hide the path, (with css you can style it) Chrome only for this one.

Hamed Al-Khabaz
  • 680
  • 4
  • 7
  • I need to use my own styled button, so this doesn't really work in my case. Thanks though. – tamakisquare Jan 03 '13 at 01:18
  • @tamakisquare: Perfectly valid use case, too. –  Jan 03 '13 at 01:20
  • @bvukelic - Thanks for the reminder. I overlooked the part that the button of `` can be styled. – tamakisquare Jan 03 '13 at 01:25
  • @tamakisquare: Yeah? I wasn't aware of that. Certainly doesn't work for me in FF. –  Jan 03 '13 at 01:28
  • @bvukelic you can't change the width in firefox, but you can change the height and some other properties, [this one](http://jsfiddle.net/etHze/2/) im clipping the input text and just showing the browse button (firefox only). Just for demonstrating purposes. – Hamed Al-Khabaz Jan 03 '13 at 01:41
  • @Wololo: Thanks, but I'd rather stick to the "hide the motherf***er and be done with it" approach. :) –  Jan 03 '13 at 01:43
  • @bvukelic yes, that is the way to go! – Hamed Al-Khabaz Jan 03 '13 at 01:44