Upload file using text link instad of input

Question

I know there are a few posts about this already but the answers in some seem to have caused some controversy so, I'm wondering if there's a "foolproof" way of triggering the file upload without using an input field. Basically what I want to do id to have a div with an Icon & text link which triggers the file upload when you click it. Kind of like:

.upload{
padding: 5px 10px 5px 30px;
background: url() center left no-repeat;
}
<div class="upload">(icon) Click here to add a photo</div>

Any help or advice would be hugely appreciated, thank you.

What's wrong with answers like [this](http://stackoverflow.com/questions/572768/styling-an-input-type-file-button)? — MiniRagnarok, Jul 22 '13 at 12:59
Because I don't want to style the input, I don't want to use it at all! — user2516546, Jul 22 '13 at 13:07
@user2546546 Read the answers again. Some solutions are hiding the input. — MiniRagnarok, Jul 22 '13 at 13:09

score 5 · Accepted Answer · answered Jul 22 '13 at 12:59

5

Add to your html this:

<input id="article_file_input" type="file" name="article_picture" style="display: none;">

And to make anchor:

<a onclick="$('input[id=article_file_input]').click();">Click here to add files</a>

answered Jul 22 '13 at 12:59

DeiForm

701
9
31

Thanks, this is exactly what I wanted to do and it works great – user2516546 Jul 22 '13 at 13:10

Upload file using text link instad of input

1 Answers1