How to Upload a file by clicking on text?

Each browser has it’s own rendition of the control and as such you can’t change either the text or the orientation of the control.

There are some “kind of” hacks that will help you to get your desired results.

For Uploading a file by clicking on text.

Use “for” attribute of label for input.


<div>
<label class="btn" for="files"> Select Image</label>
 <input id="files" style="visibility: hidden;" type="file" /> 
</div>

Below is the code to fetch name of the uploaded file


$("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<div>
 <label class="btn" for="files">Select Image>/label>
 <input id="files" style="visibility: hidden;" type="file" /> 
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *

twenty − 3 =

Scroll to top