How to remove text field from HTML file input

Question

Normally, a file upload dialog is invoked by clicking the button created by <input type="file"/>. But then, I don't want the text field that comes with it. Is there a way to get rid of the text field? Or is there an alternative way to open the file upload dialog without using <input/>?

Answer 1

You can use a flash alternative. I have used swfUpload, with great success. Uploadify, is a similar alternative. Both of these have nice feature sets, including progress bars and multiple upload.

Answer 2

You could replace it with a flash-button as dustin stated or you could hide the button by css-placing your own button on top of the input element and open the select file box by a script.

Some examples here: inputfile

Answer 3

Check out the http://www.uploadify.com/ jQuery plugin.

Answer 4

Add file input, and set its position to quite far away.
Add a button. Set buttons onclick to $("#myFile").click(); :D

<input id="myFile" name="file" type="file" style="position:absolute;left:-10000px;top:-10000px;">

<button onclick="$('#myFile').click();">Browse</button>

Answer 5

You can add your own button and position it under the browse button with CSS.

Then set the file input to have 0 opacity.

Answer 6

agree with alex

<style>
.file_wrap{
    background:url(file.jpg);
    overflow:hidden;
    width:30px;
    height:10px;
}
.file_wrap input{
    opacity:0;
    font-size:999px;
    cursor:pointer;
}
</style>
<div class="file_wrap">
   <input type="file" />
</div>