How To Link Input Button Display:none Behavior With The Label

I want to link an input display: none button to a label so that when I click on the label, it has the same behavior of my hidden input button. How can I do this? Below is my HTML5

Solution 1:

If you want the label to trigger a click event on the input type=file, then use:

$('.uploadFile').click(function() {
  $("#model1").unbind('click').bind('click');
})

I've also added how to add the file name to the label:

$('#model1').change(function() {
 var filename = $(this).val().split('\\').pop();
 $('.uploadFile').text(filename)
})

$('.uploadFile').click(function() {
  $("#model1").unbind('click').bind('click');
})

$('#model1').change(function() {
 var filename = $(this).val().split('\\').pop();
 $('.uploadFile').text(filename)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="model1" class="uploadFile">File...</label>
   <input id="model1"  type="file"    name="model1" class="model1"
style="display:none;" th:required="true"  />

Solution 2:

You could use javascript, and have something like:

<label for="model1" class="uploadFile" onclick="handleClick()">File...</label>

and then define a handleclick() function which will process what you need to do with the button press.

The handleclick() could be as simple as:

$('#element').click();

or

$('#element').trigger('click');