endlich anpassbar: der Durchsuchen- Button im Upload Formular
Dienstag, 29 Juni 2010
Fast jedes Uploadfomular, das man erblickt, hat einen "Durchsuchen"-Button. Leider lässt sich dieser Defaulttext nicht so einfach ändern, wie es bei anderen Formularfelder, doch auch geht. "Datei auswählen" vielleicht oder "Festplatte anzeigen". Mit einem kleinen Trick gehts aber schon.
Zuerst packen wir ein DIV um das Feld herum, und verteilen per CSS die Eigenschaft position:relative. Das Inputfeld für den Upload positionieren wir per CSS ebenfalls relative, die Opacity setzen wir auf 0. Leider braucht es dafür 3 Zeilen, weil die Browser hier unterschiedlich ticken. Dann folgt noch ein DIV mit einem leeren Input-Tag, der diesmal absolut positioniert wird.
Der Trick ist, das Uploadfeld steht im Vordergrund (z-index:2) ist aber nicht sichtbar (opacity:0) und ein 2. Input kommt hinzu, in einem Div, der sichtbar ist.
<div class="container">
<input type="file" class="file">
<div class="fakeinput"><input> Datei uploaden</div>
</div>
<style type="text/css">
div.container{position:relative;}
div.fakeinput{position:absolute;top:0;left:0;z-index:1;}
input.file{position:absolute;top:0;left:0;text-align:right;-moz-opacity:0;filter:alpha(opacity:0);opacity:0;z-index:2;}
</style>
und hier zum Testen
Nun, ich habe statt "Durchsuchen" "Datei uploaden" hingeschrieben, man kann aber auch eine Grafik verwenden. Und ja stimmt, der Artikel gehört nicht in die Rubrik PHP, passt hier aber immer noch am Besten. Und eine ganz neue Rubrik wollte ich auch nicht aufmachen. Deshalb sei an dieser Stelle auf das sichere Uploadscript vionlink UploadS und desseb großen Bruder vionlink UploadS XL hingewiesen. In diesen Uploadscripten kann die hier Erlernte Technik direkt in der Praxis getestet werden. In disem Sinne.
This is a nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is another nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.