Click On Input Box To Show Open File Dialog But Not Click On Choose File Button

I have an input box and I want user to click on the input box to show the open file dialog and show the filename in the same input box. But if I use the input type='file', it will

Solution 1:

You can overlay a transparent <input type="file"/> over a styled button or other element.

<inputtype="file" style="opacity:0;"/>

See this JSFiddle for a working demo.

Solution 2:

Well there is a little hack for this. You do need to have file upload control on the page. But you can hide it and simulate the file upload control using any other control like div/span/button and style it as you want. Here is a working sample on jsfiddle.

HTML:

<divid="dummy"class="dummyDiv"><span>click to chose file:</span><spanid="fileName"class="yellow"></span></div><divclass="wrapper"><inputtype="file"id="flupld" /></div>

JS:

$("#dummy").click(function () {
    $("#flupld").click();
});

$("#flupld").change(function () {
    //file input control returns the file path as C:\fakepath\<file name>//on windows, so we remeove it and show only file name.var file=$(this).val().replace(/C:\\fakepath\\/ig,'');

    $("#fileName").text(file);
});

Solution 3:

try it:

<input type="file"id="upload" style="display:none">
   <a href="" onclick="document.getElementById('upload').click(); return false;"> Upload </a>

Working sample on JSFiddle