Question

195

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

rated 0 times [ 198] [ 3] / answers: 1 / hits: 16273 / 14 Years ago, fri, march 4, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jayden

Add To Favorites

Follow

Total Points: 108

Total Questions: 109

Total Answers: 107

Location: Kenya

Member since Mon, Jun 14, 2021

3 Years ago

answered 14 Years ago madelyn · Accepted Answer

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 />.