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.
Definition and Usage. The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute.
Definition and Usage The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!
Definition and Usage. The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!
I can't remember the source of the technique but this seems to be cross-browser. Tested in:
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" />
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With