HTML input="file" button to text

Question

I want to replace input="file" button to only text like that http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm but i don't want to use whole library. How can i do this ?

Answer 1

Ajax upload

Answer 2

It is actually input type="file" control. They have used a wrapper div to show it. You can style a div as the Upload button text using an image. Then place an input type="file" control on top of it and make its opacity to 0. Thats all

Eg:

<style>
.invis
{
 margin: -5px 0pt 0pt -175px; padding: 0pt; position: absolute; width: 30px; height: 30px; font-size: 14px; cursor: 

pointer;opacity: 0; display: block; z-index: 2147483583; top: 2px; left: 180px;filter:alpha(opacity=0);
}
</style>
<div>test</div>
<input type="file" name="myfile" class="invis" />

I haven't used any image. You can use an image to style the wrapper div.