styled file input button in IE8


September 19, 2013 at 09:54
CSS jQuery

What I needed was a styled "Upload Image" Button, therefore I could not use the standard input type="file". So I included it in the HTML but hid it like this:
input[type="file"]#imagefile{
visibility:hidden;
width:0;
height:0;
}
The styled button is a label with for="imagefile", to automatically invoke the file upload on click. And since I wanted to submit the form right after selecting an image, the file element had an additional onchange event:
<input id="imagefile" type="file" name="imagefile" onchange="$('#formid').submit();" />
So every normal browser sent the form right after choosign an image. But this did not work in IE8. Internet Explorer 8 just wouldn't submit the form, there was no error message, no clue as to why that didn't work. Turns out a label doesn't do what its supposed to do in IE8 as long as the input element is set to hidden. So I left width and height to 0 but changed the visibility for IE8:
input[type="file"]#imagefile{
visibility:visible;
}
Makes it work like a charm!

Tags: formulare image upload label styled input field submit


Hinterlasse einen Kommentar:
Search