Bob Horn Bob Horn - 2 years ago 107
Javascript Question

Want a Button But Have to Use Input Where Type=File?

I have an Import button that I want to look like this:

enter image description here

The HTML for that looks like this:

<button on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();">Import</button>

However, because I want the button to open a file, my research shows I need to use an input control and it looks like this:

enter image description here

Here is the HTML for it:

<input type="file" on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();"></input>

I don't need the input box, and I don't need a button to say browse. I want the functionality of the second option, with the look of the first. Is that possible?

Answer Source

Yes but you will need to use javascript. Make the file input hidden and then make the button click activate it like so

 <input id="files" type="file" style="display:none"/>
 <button id="upload" type="button"> </button>
    $('#upload').click(function() {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download