Program-Me-Rev Program-Me-Rev - 1 year ago 67
HTML Question

How to use a link instead of the normal file input button to explorer files and folders

I would like to create a link which when clicked shows the file/folder explorer, instead of the usual file-input (file explorer button) ussually used in web pages. Is this really possible?

The only way I've managed to go about it is using the Bootstrap FileStyle, which is, however, still a button, al·be·it better looking than the default file WW3 input button.

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Via JavaScript:

$(":file").filestyle({badge: false});

Via data attributes:

<input type="file" class="filestyle" data-badge="false">

Answer Source

You can use this

<input id="input_file" type="file" style="display:none;">
<a href="#"><label for="input_file">Trigger the file input</label></a>

Though, wrapping a label with an anchor is not a valid HTML. I recommend using jQuery or Javascript to do the job.

Here's the example using jQuery to achieve what you want.

<script src=""></script>

<input type="file" id="input-file" style="display:none;">

<a href="#"><label for="input-file">Trigger input file without script</label></a><br><br>
<a href="#" id="trigger-input-file">Trigger input file with the jQuery script</a>

Hope this help! Cheers!