click on input box to show open file dialog but not click on choose file button

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.