click on input box to show open file dialog but no

Question

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 show the "choose file button", I dont wan to show the button. How can I do it?

html:

<div class="fileupload">
    <input type="file" class="file" name="image" />
</div>

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

http://jsfiddle.net/EctCK/ ** I dont wan this, how do I hide the choose file button?

Answer 1

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

<input type="file" style="opacity:0;"/>

See this JSFiddle for a working demo.

Answer 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:

<div id="dummy" class="dummyDiv"> 
    <span>click to chose file:</span> 
    <span id="fileName" class="yellow"></span>
</div>
<div class="wrapper">
    <input type="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);
});

Answer 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