How to make a link act as a file input

Question

I have a link,

<a id="upload-file">Upload your photo</a>

And if clicked, I want it to act as an browse file input

<input id="upload-file" type="file"/>

How would I accomplish this?

score 88 · Accepted Answer · answered Jul 10 '12 at 04:37

88

HTML

<input id="upload" type="file"/>
<a href="" id="upload_link">Upload your photo</a>

CSS

#upload{
    display:none
}

JS

$(function(){
    $("#upload_link").on('click', function(e){
        e.preventDefault();
        $("#upload:hidden").trigger('click');
    });
});

DEMO.

answered Jul 10 '12 at 04:37

The Alpha

138,380
26
281
300

3

Really smart solution. Its clearly the right answer, and I would have spent hours trying to figure this out from scratch. Thanks. – usumoio Dec 31 '14 at 18:51

score 18 · Answer 2 · answered Mar 25 '19 at 01:43

HTML Only

Here's a pretty simple answer that works with no CSS, Javascript/jQuery and doesn't rely on any framework infrastructure.

<label>
  <input type="file" style="display: none;">
  <a>Upload Photo link</a>
</label>

or even simpler

<label>
  <input type="file" style="display: none;">
  Upload Photo link
</label>

score 7 · Answer 3 · answered Jul 10 '12 at 04:32

following will solved the problem

html

<input id="upload-file" type="file"/>
<a id="fileupload">Upload your photo</a>

css

#upload-file{
    display: none;
}

js

$("#fileupload").click(function(){
    $("#upload-file").click();
});

http://jsfiddle.net/WXBKj/

Benjamin Arthuys · Answer 4 · 2019-02-07T14:01:49.357

4

You can do it without Javascript like this. cross-browser solution with attribute for :

DEMO

HTML

<label for="inputUpload" class="custom-file-upload">Upload your file</label>
<input id="inputUpload" type="file" />

CSS

#inputUpload {
    display: none;
}

.custom-file-upload {
    cursor: pointer;
    font-size: inherit;
    color: #0c090d;
}

.custom-file-upload:hover {
    text-decoration: underline;
}

DEMO

edited Feb 07 '19 at 14:01

answered Feb 07 '19 at 13:53

Benjamin Arthuys

123
1
7

score 2 · Answer 5 · answered Jul 10 '12 at 04:32

2

You can have a hidden <input> tag that you can then call $('#upload').click() on in order to simulate a click.

Or, you can have a hidden <input> tag that has an id, and then just add a label attribute to your link.

answered Jul 10 '12 at 04:32

Ivan

9,534
12
46
78

Please give an example of your second option. – Jeffrey Aug 12 '17 at 23:28

score 1 · Answer 6 · answered Aug 03 '18 at 13:54

In Angular 6, you can do like this,

<li class="list-group-item active cursor-pointer" (click)="file.click()">
    <i class="fas fa-cloud-upload-alt"></i> Upload <input type="file" #file hidden />
  </li>

When you click li html tag, the input button's click is triggered."hidden" attribute makes invisible.

Ahsan Rathod · Answer 7 · 2012-07-10T04:38:23.043

0

EDITED:

See This Demo: http://jsfiddle.net/rathoreahsan/s6Mjt/

JQUERY:

$("#upload").click(function(){
    $("#upload-file").trigger('click');
});

HTML

<a href="javascript:void(0)" id="upload">Upload your photo</a>
<input id="upload-file" type="file"/>

CSS

#upload-file {
    display:none;
}

OR

You may use nice plugins like this:

http://blueimp.github.com/jQuery-File-Upload/

edited Jul 10 '12 at 04:38

answered Jul 10 '12 at 04:31

Ahsan Rathod

5,397
2
19
25

score -3 · Answer 8 · answered Jul 10 '12 at 04:30

-3

The best one http://valums.com/ajax-upload/

answered Jul 10 '12 at 04:30

coolguy

7,728
9
43
71

How to make a link act as a file input

8 Answers8

Linked