‘Standard Windows Upload-Button stylen’

Wie sehr viele Webentwickler stand ich vor geraumer Zeit wieder vor der Herausforderung einen Bild-Upload zu programmieren. Dieses mal stand für mich aber weniger die Funktionalität des Uploads im Vordergrund – denn hier gibt es ja bereits dutzende, relativ einfache Vorgehensweisen. Die Herausforderung bestand eher darin, den Standard-Windows-Button für das “Durchsuchen” der Dateien zu stylen.

In Foren selbst findet man diesen “Hack” relativ schwer, er dürfte meines Erachtens auch noch relativ jung sein. Das Prinzip ist jedoch sehr einfach. Das Formular für den Bildupload inklusive Eingabefeld und Button wird über CSS so gestaltet, dass das input-Tag sowie der Standard-Windows-Button für das “Durchsuchen…” (bzw. “Browse…”) verschwinden. Stattdessen kann man seinen eigenen Button platzieren, und behält die gleiche Funktionalität eines File-Uploads. Hier der Code, den ich auf youdo.at eingesetzt habe:

HTML-Code:

<form enctype="multipart/form-data" method="post">
<div id="upload">
<div><input id="upload_image" name="upload_image" size="30" type="file" />
<div><span>Foto hochladen</span></div>
</div>
</div>
<input name="MAX_FILE_SIZE" type="hidden" value="260000" /> </form>

und hier das CSS (die Klasse für den Button “button_120”) kann man hier selbst gestalten:

#upload {
position: relative;
height: auto;
width: 120px;
overflow: hidden;
width: 120px;
}
#upload .upload_file {
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
#upload .file {
margin: 0;
padding: 0;
font-size: 2em;
text-align: right;
z-index: 2;
-moz-opacity: 0;
opacity: 0;
filter: Alpha(opacity=0);
top: 0;
right: 0;
cursor: pointer;
overflow: hidden;
position: absolute;
}

Ich hoffe ihr könnt damit was anfangen. Zum Ausprobieren könnt ihr auch auf youmbo.com gehen. Dort kann man als registrierter Benutzer zu jedem Beitrag Bilder hochladen, ein File-Upload, der nach genau diesem Prinzip aufgebaut ist.