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

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 2

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>

Answer 3

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 4

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 5

查看http://www.uploadify.com/jQuery插件。

Answer 6

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 7

If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field

This tiny plugin will display the file input field as a bootstrap button (no text input field), similar in all browser and will show selected file names (or selection errors) beautifully. Check their live demo .

Additionally you can set various restrictions using simple data-attributes or JS settings. e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.