gestylter File Upload Button im IE8

19. September 2013

Ich brauchte einen komplett gestylten “Bild hochladen” Button und konnte daher das standard input type=”file” nicht verwenden. Bzw. habe ich es folgendermaßen ausgeblendet:

  1. input[type="file"]#imagefile{
  2. visibility:hidden;
  3. width:0;
  4. height:0;
  5. }

Mein gestylter Button war ein label mit for=”imagefile”, damit beim Klick auf denselben dann eh automatisch der Upload geöffnet wurde. Und da ich nach dem Upload automatisch das Formular abschicken wollte, hatte das input Element noch ein onchange Event:

  1. <input id="imagefile" type="file" name="imagefile" onchange="$('#formid').submit();" />

Damit wurde in allen normalen Browsern beim Klick auf das Label der Upload aufgerufen und nach dem Auswählen der Datei das Formular automatisch abgeschickt. Das klappte allerdings nicht im IE 8. Der wollte partout das Formular nicht abschicken, es gab keine Fehlermeldung, kein Anhaltspunkt was das Problem war.
Stellt sich raus, ein Label funktioniert nicht wie es soll im IE8, wenn das input Element auf hidden gesetzt ist. Daher habe ich width und height bei 0 gelassen, für den IE8 allerdings extra das Stylesheet geändert:

  1. input[type="file"]#imagefile{
  2. visibility:visible;
  3. }

Jetzt klappts auch mit dem Internet Explorer.