Open file dialog when input type button

Question

In html we know using input type file we get file dialog to select file. Is there any way to open file dialog using input type button? We used

<input type="file" class="file" name="attachement" />

But I want to use

<input type="button" class="file" name="attachement" />

Answer 1

Yes - you can hide the input type="file" but still have it in your markup. You then show a regular button on your page and onclick of that button, you programmatically trigger the click event of your actual file input:

<input id="fileInput" type="file" style="display:none;" />
<input type="button" value="Choose Files!" onclick="document.getElementById('fileInput').click();" />

Fiddle: http://jsfiddle.net/cnjf50vd/

Answer 2

You can use a button and a hidden file element

function openAttachment() {
  document.getElementById('attachment').click();
}

function fileSelected(input){
  document.getElementById('btnAttachment').value = "File: " + input.files[0].name
}

<input type="file" class="file" id="attachment" style="display: none;" onchange="fileSelected(this)"/>
<input type="button" class="file" id="btnAttachment" onclick="openAttachment()" value="File"/>