javascript - A file input button for all browsers, is this possible?

Question

Is it possible to use uploadify to allow any user to select a file from the file dialogue and insert it into the file input element of a form? I only need to use uploadify as a way to style the "upload button" as an image.

I have tried other approaches here, here and here. All are not compatible with all browsers.

What else can I use / do to have my file input element as an image?

I would like to have my file input button to look consistent in all browsers.

Answer 1

I can't remember the source of the technique but this seems to be cross-browser. Tested in:

• Google Chrome 9
• FireFox 3.6
• Internet Explorer 6-9
• Opera 10
• Safari for Windows

Here is the complete code:

HTML:

---

<div>
    <button><!-- this is skinnable -->Pick a file ...</button>
    <input type="file" />
</div>

CSS:

---

div
{
    position:relative;
    width: 100px;
    height: 30px;
    overflow:hidden;
}

div button
{
    position: absolute;
    width: 100%;
    height: 100%;
}

div input
{
    font: 500px monospace; /* make the input's button HUGE */
    opacity:0; /* this will make it transparent */
    filter: alpha(opacity=0); /* transparency for Internet Explorer */
    position: absolute;  /* making it absolute with z-index:1 will place it on top of the button */
    z-index: 1;
    top:0;
    right:0;
    padding:0;
    margin: 0;
}

The idea is to make the <input type="file" /> transparent and place it on top of some style-able content (a <button> in this case). When the end user clicks the button she will actually click the <input type="file" />.