Create a "Fake Button"

Question

I'm making a form, and as you know some some types of forms are harder to style than others. For instance <input type="file">, I'd like to somehow make a fake button so when you click the fake button, it's really clicking the input button.

I've tried:

$("#inputFile").click();

But as you suspect, this didn't work.

Is this possible?

http://ericbidelman.tumblr.com/post/14636214755/making-file-inputs-a-pleasure-to-look-at — Amadan, Apr 03 '14 at 02:07
Obviously, the ability of a browser to upload local files to a website, under the control of that website and without the user's knowledge, is deliberately restricted. — Michael Lorton, Apr 03 '14 at 02:16
The answer to this question http://stackoverflow.com/questions/6461252/custom-upload-button/6461518#6461518 does what you are looking for. — natedavisolds, Apr 03 '14 at 02:16

score 4 · Accepted Answer · answered Apr 03 '14 at 02:11

4

You can trigger click event of input element using .trigger() when click on the button:

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

Fiddle Demo

answered Apr 03 '14 at 02:11

Felix

37,892
8
43
55

Hmmm, this is more simple than I thought. – user3491849 Apr 03 '14 at 02:17
I haven't tried this technique. Obviously the button is easier to style than input type file. Thank you! – witherwind Apr 03 '14 at 02:17
It is. But I ain't certain if the file will be fetched correctly using this. – witherwind Apr 03 '14 at 02:19
@witherwind I'm pretty sure it will, because it's not getting the file from the ` – user3491849 Apr 03 '14 at 02:26
I meant, I wasn't sure at first that's why I didn't answer. But I tested it and worked. – witherwind Apr 03 '14 at 02:28

score 0 · Answer 2 · answered Apr 03 '14 at 02:20

@felix's answer is right. In addition,

The example is given on jQuery API page as well .

Please check the 3rd example

We can also trigger the event when a different element is clicked:

$( "#other" ).click(function() {
    $( "#target" ).click();
});

score -1 · Answer 3 · edited May 23 '17 at 10:26

-1

Here is an example of what you are looking for.

Custom Upload Button

I repeat the answer here:

The trick is to turn the opacity of the input to 0 and then change the background underneath it to the button style that you want.

Given this html:

<div class="file_button_container"><input type="file" /></div>

Use this css:

  .file_button_container,
  .file_button_container input {
       height: 47px;
       width: 263px;
   }

   .file_button_container {
       background: transparent url(https://i.stack.imgur.com/BT5AB.png) left top no-repeat;
   }

   .file_button_container input {
       opacity: 0;
   }

Here it is in action: http://jsfiddle.net/t6EKv/1/

edited May 23 '17 at 10:26

Community

1
1

answered Apr 03 '14 at 02:18

natedavisolds

4,305
1
20
25

This does look like a good technique, but I had already excepted a different answer. – user3491849 Apr 03 '14 at 02:21
Anyone have an idea why I got the down vote? For posting an alternative? – natedavisolds Apr 03 '14 at 02:32

Create a "Fake Button"

3 Answers3