28. September 2010

Uploadfelder anders designen

in Dev, Tutorial

Ich habe mich im Rahmen eines aktuellen Projektes mit dem Layouting eines HTML File-Feldes beschäftigt und hierbei einige Zeit verbracht. Vielleicht kann der eine oder andere hiervon etwas gebrauchen, auch wenn es sich nicht primär um TYPO3 handelt.

Normales Vorgehen
Das Design eines Feldes vom Typ File innerhalb eines HTML Formulares wird alleine vom Browser bestimmt. Der Text des „Durchsuchen“ Buttons kommt vom Betriebssystem. Aktuell lässt sich weder das eine noch das andere einfach und sauber ändern.

Beispiel-HTML:

<form>
   <div>
      <input type="file" name="upload" />
   </div>
</form>

Beispiel-Feld:

Anderes Layout mit CSS
Verändertes Upload Field:
File Upload
Um ein Upload-Feld wirklich in einem anderen Design anbieten zu können, benötigt man normalerweise Flash (so geschehen bei WordPress oder TYPO3 im Backend) oder ein Java Applet. Mit einem Trick funktioniert es jedoch auch mit HTML/CSS.
Im Prinzip kann man dem umschließenden DIV eine Hintergrundgrafik geben und das Input-Feld transparent machen. Damit sieht es so aus als würde der Besucher auf ein Bild klicken, klickt in Wirklichkeit jedoch auf den unsichtbaren „Durchsuchen-Button“.

Beispiel CSS:

form div {
    width: 79px;
    height: 22px;
    background: url(btn-choose-file.gif) 0 0 no-repeat;
    display: block;
    overflow: hidden;
    cursor: pointer;
}
form div input {
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

Eine ausführliche Anleitung hierzu findet ihr auf shauninman.com. Ausprobieren könnt ihr das auf der Testseite von Shaun.
Hinweis: Falsch ist wenn man das input Feld mit display:none oder visibility:hidden formatiert. Damit ist dieses auch nicht mehr klickbar.

Noch einfacher mit jQuery
Wem das alles zu viel Einstellung ist oder wer sowiewo jQuery im Einsatz hat, kann sich auch mit dem Filestyle Plugin behelfen. Hierbei sagt man dem Plugin wo und wie groß das gestylte Bild ist, wie das Input Feld heißt und das Plugin kümmert sich um den Rest. Ausprobieren lässt sich das Ganze auf der Filestyle Demo Seite.

Beispiel Code:

$("input[type=file]").filestyle({ 
     image: "choose-file.gif",
     imageheight : 22,
     imagewidth : 82,
     width : 250
 });

Links

Freue mich wie immer über alle Kommentare.

Gruß, Alex

Keine Reaktionen zu “Uploadfelder anders designen”

Kommentare abonnieren (RSS) oder TrackBack URL

Kategorien

Archiv