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 es 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/>?

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 es 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/>?

• javascript
• html

• Duplicate of stackoverflow./questions/1084925/… ? – Mischa Commented Oct 18, 2010 at 2:39

7 Answers 7

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>

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>

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.

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

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

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

Then set the file input to have 0 opacity.

If you are using jQuery, have a look at this plugin - https://github./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.