In diesem Artikel wird erklärt, wie der Trinitäts-Operator (engl. Ternary Operator, auch Fragezeichenoperator oder dreifach konditionaler Operator genannt) funktioniert, und wie man ihn richtig anwendet.

Funktionsweise

Der Trinitäts-Operator stellt im Grunde eine Fallunterscheidung in Verbindung mit einer Zuweisung oder einem Funktionsaufruf dar. Man möchte einer Variablen entweder Wert 1, oder Wert 2 zuweisen, abhängig von einer Bedingung. Oder: Man möchte, abhängig von einer Bedingung entweder Funktion X oder Funktion Y aufrufen. Dadurch, dass man sich das if/else sparen kann, und den Variablennamen nur einmal schreiben muss, wird das ganze nicht nur kürzer, sondern auch übersichtlicher.

Abfrage/Zuweisung mit if

Würde man eine solche Zuweisung mit einer normalen if/else-Abfrage realisieren, bräuchte man 5 Zeilen. Das sähe wie folgt aus:

if (<Bedingung>) {
    <Variable> = <Wert 1>;
} else {
    <Variable> = <Wert 2>;
}

Abfrage/Zuweisung mit if (verkürzt)

Eine solche if-Abfrage lässt sich natürlich noch verkürzen. Die geschweiften Klammern können weggelassen werden, und man kann alles in eine Zeile quetschen.

if (<Bedingung>) <Variable> = <Wert 1>; else <Variable> = <Wert 2>;

Abfrage/Zuweisung mit dem Trinitäts-Operator.

Mit dem Trinitäts-Operator wird die Zuweisung dann noch kürzer, und wenn man den Trinitäts-Operator kennt, ist auch sofort ersichtlich, was diese Zeile tut.

<Variable> = (<Bedingung>) ? <Wert 1> : <Wert 2>;

Beispiel

Und noch ein Beispiel, mit richtigen Werten.

// Normale Form
 
if ($antwort1 == 42 && $antwort2 == 1337) {
    $allesrichtig = true;
} else {
    $allesrichtig = false;
}
 
// Verkürzte Form
 
if ($antwort1 == 42 && $antwort2 == 1337) $allesrichtig = true; else $allesrichtig = false;
 
// Trinitäts-Operator
 
$allesrichtig = ($antwort1 == 42 && $antwort2 == 1337) ? true : false;

Man schreibt also zuerst die Bedingung (in Klammern), dann ein Fragezeichen und den Wert den die Variable annehmen soll, wenn die Bedingung wahr ist, dann einen Doppelpunkt, und den Wert für den Fall das die Bedingung unwahr ist.

Noch kürzer

Seit PHP 5.3 gibt es noch eine weitere Form des Trinitäts-Operators, mit der sich manche Zuweisungen noch weiter verkürzen lassen.

<Variable> = <Variable/Bedingung> ?: <Wert>;

Dabei wird ausgewertet ob die Bedingung wahr ist, bzw. die Variable den booleschen Wert true hat (oder dazu umgewandelt werden kann). Ist das der Fall, bekommt die Variable den Wert der Bedingung zugewiesen, ansonsten den anderen Wert.

Hier noch ein Beispiel, welches das ganze vielleicht etwas besser verdeutlicht:

$id = @$_GET['id'] ?: 0;

Wenn $_GET['id'] gesetzt, und ungleich 0 ist, nimmt $id den Wert von $_GET['id'] an. Ansonsten bekommt $id den Wert 0. Das @ steht da, damit PHP nicht über eine undeklarierte Variable meckert, falls $_GET['id'] nicht gesetzt ist.

Funktionen aufrufen

Der Trinitäts-Operator kann auch in Verbindung mit Funktionsaufrufen verwendet werden. Dabei ist es auch möglich mehrere Funktionen aufzurufen. Von letzterem rate ich allerdings ab, in den meisten Fällen wird das schnell unübersichtlich. Wie es funktioniert erkläre ich allerdings trotzdem: Um mehrere Funktionen im Trinitäts-Operator zu verwenden, müssen diese mittels AND verbunden werden, eine Trennung mittels Semikolon oder && funktioniert nicht.

$allesrichtig ? print("Alle Fragen wurden richtig beantwortet, super!") AND
                die("Das Quiz ist zu Ende.") : die("Leider falsch!");

Es ist übrigens auch möglich, den Trinitätsoperator innerhalb von Zeichenketten zu verwenden:

echo 'Bitte ' . ($siezen ? 'klicken Sie ' : 'klicke ') . 'hier, '
. 'um zur vorherigen Seite zurückzukehren';

So nicht!

Der Trinitäts-Operator kann zwar verschachtelt werden, davon rate ich aber ab. Solche Zuweisungen werden schnell sehr unübersichtlich.

// Unübersichtlich:
$allesrichtig = ($antwort1 == 42 && $antwort2 == 1337) ? (($antwort3 > $antwort4) ?
                ((0 === 0) ? true : false) : false) : false;

Beispiel-Datei

Eine Beispieldatei, mit allen möglichen Formen der Verwendung des Trinitäts-Operators habe ich auch noch erstellt: Beispiel.phps

Colorpicker in Aktion (Demo)
Webseite vom Colorpicker-Skript

Benutzung

Zuerst werden jQuery und die colorpicker.js eingebunden.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/colorpicker.js" type="text/javascript"></script>

Anschließend können HTML-Elemente mit dem Aufruf der ColorPicker-Funktion erweitert werden. Die Funktion akzeptiert einige Parameter, die aber alle optional sind. Ruft man die Funktion ohne Parameter auf, öffnet sich der Dialog beim Anklicken des Elements.

$('#element').ColorPicker();

Möchte man eine Farbauswahl direkt auf der Seite anzeigen, verwendet man die flat-Option.

$('#farbauswahl').ColorPicker({
    flat: true,
    color : '#123456',
});

Mit der color-Option lässt sich außerdem eine Farbe vorgeben.

Meistens möchte man die ausgewählte Farbe aber auch noch irgendwie weiterverarbeiten, beispielsweise in ein Formularfeld eintragen. Dazu eignen sich die Optionen onSubmit und onChange, die beim Abspeichern der Farbe (onSubmit) bzw. beim Verändern der Farbe (onChange) aufgerufen werden.

$('input').ColorPicker({
    onSubmit : function(hsb, hex, rgb, element) {
        // hsb = HSB-Farbraum als Objekt ({ 'h' : 100, 'b' : 200, 's' : 300})
        // hex = Hexadezimale Schreibweise (#123456)
        // rgb = RGB-Farbraum als Objekt ({ 'r' : 123, 'g' : 123, 'b' : 123})
        // element = Das Element, an welches der ColorPicker angehangen wurde.
        $(element).val('#' + hex);
    }
});

Das sind die wichtigsten Optionen. Eine ausführlichere Beschreibung aller Optionen findet sich auf der Webseite von ColorPicker.

Geschwindigkeitsvergleich

Dominik Deobald vergleicht in seinem Artikel Benchmarking PHP: eAccelerator und andere OpCode Caches die Geschwindigkeit von PHP ohne Zwischenspeicher mit der Geschwindigkeit von 5 populären Zwischenspeichern. Neben APC werden auch eAccelerator, Zend und xCache getestet. Sein Fazit: Die Nutzung eines Zwischenspeichers lohnt sich, wie sehr die Geschwindigkeit sich verbessern lässt ist allerdings anwendungsabhängig. In seinen Tests schneidet der eAccelerator etwas besser ab als APC.

Installation von APC

Ab PHP 6 soll APC zu PHP standardmäßig dazugehören, zur Zeit ist es nur ein PECL-Modul, und muss erst installiert werden. Die meisten Linux-Distributionen bieten allerdings Pakete für APC an, was die Installation stark vereinfacht. Aber auch die Installation mittels PECL ist eigentlich nicht weiter schwer. Wie man den Zwischenspeicher installiert, und ihn in der php.ini aktiviert, erkläre ich im Artikel Installation von APC.

APC richtig konfigurieren

Die Standardkonfiguration von APC ist für die meisten Einsatzzwecke gut geeignet. Dennoch gibt es einige Optionen, die man vielleicht anpassen möchte. In meinem Artikel Konfiguration von APC erkläre ich die wichtigsten Optionen, und zeige eine Übersicht aller Einstellungsmöglichkeiten. Ich beschreibe beispielsweise wie man die Größe des Zwischenspeichers verändern kann, wie die Überwachung des Hochladevorgangs eingeschaltet wird, die Lebensdauer von Dateien im Zwischenspeicher eingestellt wird, und noch einiges mehr.

Funktionen von APC

APC kann nicht nur die Geschwindigkeit von PHP erhöhen, indem es vorkompilierte Dateien zwischenspeichert. APC kann auch Variablen/Konstanten/Objekte im Zwischenspeicher ablegen, und diese über mehrere Aufrufe hinweg verfügbar machen. So können beispielsweise zeitaufwendige Datenbankabfragen eingespart werden. Außerdem bietet APC einige nützliche Funktionen, die einem nützliche Informationen über den Zwischenspeicher liefern, sowie die Möglichkeit geben Dateien/Variablen aus ihm zu entfernen. Welche Funktionen es gibt, und wie man sie benutzt, beschreibe ich im Artikel Funktionen von APC.

APC überwachen

Mit APC wird noch ein kleines PHP-Skript mitgeliefert, mit dem man den Zustand des Zwischenspeichers überwachen kann. Außerdem können damit im Zwischenspeicher gespeicherte Variablen und Dateien eingesehen und auch gelöscht werden. Wie dieses Skript benutzt wird, erkläre ich in meinem Artikel APC: Status und Überwachung.

Alternativen

APC ist nicht der einzige Zwischenspeicher für PHP, es gibt noch einige andere. Einer davon ist XCache, der übrigens wie APC neben dem Zwischenspeicher für vorkompilierte Dateien noch über einen Variablen-Zwischenspeicher verfügt. Außerdem gibt es noch den eAccelerator, und den Zend Cache. Der IonCube PHP Accelerator und TurkMMCache sind ebenfalls Zwischenspeicher, diese werden allerdings schon seit längerer Zeit nicht mehr weiterentwickelt, und funktionieren nicht mehr mit neueren PHP-Versionen.

Variablen und Objekte

Variablen, Objekte und Konstanten werden im sog. User Cache abgelegt, dabei muss ihnen ein einzigartiger Schlüssel zugewiesen werden. APC stellt Funktionen zum Speichern, Auslesen, Überschreiben und Löschen bereit. Bei Variablen und Objekten lässt sich eine Lebensdauer angeben, diese wird bei jedem Aufruf überprüft, wurde sie überschritten, wird die Variable aus dem Zwischenspeicher gelöscht. Hat die Lebensdauer den Wert 0 (Standard), ist sie unendlich, die Variable wird also nicht automatisch gelöscht (außer natürlich bei einem Neustart/Leeren des Zwischenspeichers).

Hinweis: Es ist nicht möglich, ein Feld von Objekten im Zwischenspeicher abzulegen. Das Feld wird zwar gespeichert, die darin befindlichen Objekte haben aber alle den Wert NULL. Es gibt allerdings einen Weg, trotzdem ein Feld von Objekten zu speichern, und zwar mit dem ArrayObject.

Speichern von Variablen/Objekten

bool apc_add(string Schlüssel, mixed Variable
             [, int Lebensdauer = 0])
bool apc_store(string Schlüssel, mixed Variable
               [, int Lebensdauer = 0])

Diese Funktionen speichern eine Variable bzw. ein Objekt im Zwischenspeicher, der erste Parameter ist der Schlüssel/Name unter dem diese abgelegt wird. Der zweite Parameter ist die Variable selbst, der dritte (optional) gibt die Lebensdauer an. Die Funktion apc_store überschreibt eine Variable, wenn der Schlüssel bereits vorhanden ist, apc_add gibt in diesem Fall false zurück, ohne die Variable zu überschreiben.

// true (wenn die Variable noch nicht im Zwischenspeicher ist)
var_dump(apc_add('hallo', 'Hallo Welt'));
// false, da der Schlüssel 'hallo' bereits existiert.
var_dump(apc_add('hallo', 123));
 
echo apc_fetch('hallo'); // Hallo Welt
 
// apc_store überschreibt die Variable, wenn der Schlüssel bereits
// existiert.
apc_store('hallo', 456);
echo apc_fetch('hallo'); // 456

Auslesen von Variablen/Objekten

mixed apc_fetch(string Schlüssel [, bool &Erfolg])
array apc_fetch(array Schlüssel [, bool &Erfolg])

Mit apc_fetch können die Daten wieder aus dem Zwischenspeicher ausgelesen werden. Der erste Parameter ist der Schlüssel, unter dem die Variable abgelegt ist. Die ausgelesenen Daten werden zurückgegeben, konnten keine Daten ausgelesen werden (z.B. weil der Schlüssel nicht existiert) wird false zurückgegeben.

Im zweiten Parameter kann eine Referenz auf eine Variable angegeben werden, die von APC bei erfolgreichem Auslesen auf true, ansonsten auf false gesetzt wird. Das ist ganz nützlich, da man ja auch Variablen vom Typ boolean (true oder false) im Zwischenspeicher ablegen kann, und man sonst nicht herausfinden könnte, ob der Rückgabewert false nun bedeutet das die Variable den Wert false hat, oder die Variable nicht ausgelesen werden konnte.

apc_store('Test', 123);
echo "Inhalt von 'Test': ", apc_fetch('Test'); // 123
$erfolg = false;
 
echo "Inhalt von 'ExistiertNicht': ";
var_dump(apc_fetch('ExistiertNicht', $erfolg)); // false
 
echo '$erfolg: ';
var_dump($erfolg); // false

Es ist auch möglich mehrere Schlüssel auf einmal abzufragen, dazu übergibt man anstatt eines Schlüssels einfach ein Feld mit mehreren Schlüsseln.

var_dump(apc_fetch('Test', 'hallo'));

APC gibt dann ein Feld (Schlüssel => Wert) zurück. Wenn einer der Schlüssel ausgelesen werden konnte, gilt die Abfrage als erfolgreich, konnte kein Schlüssel ausgelesen werden, wird ein leeres Feld zurückgegeben, und $Erfolg ist trotzdem true.

array(2) { ["Test"]=>  int(123)
           ["hallo"]=>  int(456)
}

Löschen von Variablen/Objekten

bool apc_delete(string Schlüssel)

Mit apc_delete können Variablen/Objekte wieder aus dem Zwischenspeicher gelöscht werden.

Konstanten

Mit der Funktion apc_define_constants lässt sich ein Satz von Konstanten im Zwischenspeicher speichern. Mittels apc_load_constants kann dieser wieder ausgelesen werden. Jeder Satz von Konstanten bekommt einen Namen, es ist also auch möglich mehrere verschiedene Sätze von Konstanten zu speichern.

Das erstmalige Definieren der Konstanten, bzw. deren Eintragung im Zwischenspeicher dauert etwa doppelt so lange, als würde man define verwenden, das Laden der Konstanten aus dem Zwischenspeicher ist allerdings drei mal so schnell wie define. Anschließend können die Konstanten verwendet werden, wie sonst auch.

Definieren von Konstanten

bool apc_define_constants(string Schlüssel, array Konstanten
                          [, bool Groß- u. Kleinschreibung beachten = true])

Die Funktion apc_define_constants erwartet zwei Parameter. Der erste ist der Name/Schlüssel unter dem der Satz von Konstanten gespeichert wird, der zweite ist ein Feld, welches die Konstanten enthält. Der dritte Parameter ist optional, und gibt an ob bei den Konstantennamen die Groß- und Kleinschreibung beachtet werden soll (also ob KONSTANTE und Konstante ein und die selbe Konstante sind (false) oder nicht (true)).

$konstanten = array ('ROT'   => '#f00',
                     'GRUEN' => '#0f0',
                     'BLAU'  => '#00f');
apc_define_constants('farben', $konstanten);

Bei Erfolg gibt die Funktion true zurück, ansonsten false.

Konstanten auslesen

bool apc_load_constants(string Schlüssel
                        [, bool Groß- u. Kleinschreibung beachten = true])

Mit apc_load_constants können die gespeicherten Konstanten wieder ausgelesen werden, sie werden beim Auslesen automatisch definiert. Der erste Parameter gibt wieder den Schlüssel/Namen des Konstantensatzes an, der zweite, optionale Parameter, gibt an ob die Groß- und Kleinschreibung beachtet wird. Bei Erfolg wird true, ansonsten false zurückgegeben.

apc_load_constants('farben');
echo "Rot: ", ROT;

Konstanten aus dem Zwischenspeicher entfernen

Um einen Satz von Konstanten wieder zu entfernen, kann die Funktion apc_delete verwendet werden.

apc_delete('farben');

Informationen über den Zwischenspeicher

array apc_cache_info([string Typ[, bool Limitiert]])
array apc_sma_info([bool Limitiert])

Die Funktion apc_cache_info kann verwendet werden, um Informationen über den Zwischenspeicher und darin enthaltene Dateien, Variablen, etc. zu erhalten. Der Typ gibt an, welche Art von Informationen zurückgegeben werden soll. Der Parameter Limitiert bestimmt, ob nur generelle Informationen (true) oder auch ein Feld mit Informationen über die einzelnen Dateien/Variablen (false) zurückgegeben werden soll.

Folgende Typen stehen zur Verfügung:

• "user": Informationen über den “User Cache”, also die Anzahl der gespeicherten Variablen, noch freie (verfügbare) Einträge, wie oft Variablen gespeichert wurden, wie viel Speicher die Variablen verbrauchen, etc. Ist die Ausgabe nicht limitiert, werden auch noch ausführliche Informationen über jede einzelne Variable zu dem Feld hinzugefügt.
• "filehits": Eine Liste von Dateien die für den aktuellen Aufruf aus dem Zwischenspeicher geholt wurden. (Funktioniert nur, wenn --enable-apc-filehits bei der Installation angegeben wurde.)
• Datei-Speicher: Wenn kein Typ oder ein ungültiger Typ angegeben wurde, gibt die Funktion Informationen über den Dateispeicher zurück. Zum Beispiel die Größe des Speichers, die Anzahl der Dateien, wie oft eine Datei nicht im Cache gefunden wurde, etc. Wenn die Ausgabe nicht limitiert ist, wird auch ein Feld mit Informationen über alle gespeicherten Dateien zurückgeliefert.

Die Funktion apc_sma_info hingegen liefert Informationen über den benutzten Speicher. Sie gibt ein Feld zurück, mit Informationen darüber wie viele Segmente verwendet werden, wie groß diese sind, und wie viel Speicher insgesamt zur Verfügung steht. Ist die Ausgabe nicht limitiert, werden auch noch Informationen über die einzelnen Segmente zurückgegeben.

Zwischenspeicher leeren

bool apc_clear_cache([string Typ])

Um den Zwischenspeicher zu leeren, kann die Funktion apc_clear_cache verwendet werden. Hat der Parameter den Wert user, wird der Variablen/Objekte/Konstanten-Zwischenspeicher geleert, ansonsten wird der Zwischenspeicher für Dateien geleert. Gibt true bei Erfolg zurück, ansonsten false.

apc_clear_cache();

Datei kompilieren und zwischenspeichern

bool apc_compile_file(string Dateiname)

Mit apc_compile_file wird eine Datei kompiliert und im Zwischenspeicher gespeichert. In der Konfiguration eingestellte Filter werden dabei umgangen.

if (apc_compile_file('datei.php')) {
    echo "Datei >datei.php< wurde im Zwischenspeicher abgelegt.";
}
else {
    echo "Fehler: Datei konnte nicht im Zwischenspeicher abgelegt werden.";
}

Die Funktion gibt bei Erfolg true, im Fehlerfall false zurück.

Überprüfen ob APC verfügbar ist

Wenn man überprüfen möchte, ob APC verfügbar ist, kann man mit extension_loaded einfach überprüfen ob die Erweiterung geladen ist. Wenn APC geladen ist, gibt die Funktion true zurück, ansonsten false.

var_dump(extension_loaded('apc')); // true oder false

Es gibt noch ein paar andere APC-Funktionen, wie beispielsweise apc_inc/apc_dec, diese sind allerdings leider (noch) nicht dokumentiert, weswegen ich diese hier nicht erklären werde.

Wie man diese Funktionalität von APC benutzt, was vorausgesetzt wird, und welches Informationen APC liefern kann erkläre ich in diesem Artikel.

Voraussetzungen

Um den Hochladevorgang mittels APC zu überwachen, bzw. Informationen über ihn zu erhalten, werden einige Dinge vorausgesetzt. Natürlich muss APC installiert und aktiviert sein. In der APC-Konfiguration muss die Option apc.rfc1867 auf On stehen. Der Benutzer muss JavaScript in seinem Browser aktiviert haben, denn sonst kann der Fortschritt nicht mittels AJAX abgefragt werden. Außerdem muss das Hochlade-Formular um ein weiteres input-Element erweitert werden. Als Ziel-Adresse für das Formular wird ein iframe verwendet.

Die Werte folgender beider APC-Optionen müssen bekannt sein:

• Der Präfix: apc.rfc1867_prefix (upload_)
• Der Name des Formularelements: apc.rfc1867_name (APC_UPLOAD_PROGRESS)

(Standardwerte in Klammern, wenn nichts an der Konfiguration geändert wurde, kann man davon ausgehen das APC diese Werte verwendet. Der Einfachheit halber verwende ich in dieser Anleitung in Beispielen immer die Standardwerte, wenn man andere Werte benutzt, müssen diese natürlich entsprechend angepasst werden.)

Das Formular

Das Hochlade-Formular muss etwas erweitert werden. Zuerst wird ein zusätzliches input-Element mit dem Namen APC_UPLOAD_PROGRESS erstellt, welches einen eindeutigen Wert zugewiesen bekommt. Über diesen Wert kann später der Hochladevorgang verfolgt werden, deshalb ist es auch wichtig, dass der Wert einzigartig ist, sonst funktioniert das ganze nicht mehr, wenn mehrere Benutzer gleichzeitig Dateien hochladen. Mit der PHP-Funktion uniqid() ist das aber kein Problem, sie erstellt eindeutige IDs.

<input type="hidden" name="APC_UPLOAD_PROGRESS" value="<?php echo uniqid(); ?>" />

Wenn eine Datei hochgeladen wird, blockiert die Seite normalerweise, und der Benutzer kann nichts auf der Seite machen, bis die Datei vollständig hochgeladen wurde. Ist die Datei dann hochgeladen, bekommt der Benutzer die Ausgabe der Ziel-Seite (action) des Formulars zu sehen. Wenn man eine Fortschrittsanzeige erstellen möchte ist das natürlich ungünstig. Deshalb erstellt man ein iframe, und weist dem Formular dieses iframe als target zu. Dadurch wird die Ziel-Seite im iframe geladen, und die Formular-Seite blockiert nicht.

Das sollte man aber nur machen, wenn der Benutzer JavaScript aktiviert hat, und somit die Fortschrittsanzeige sehen kann. Deswegen wird die target-Eigenschaft dem Formular per JavaScript zugewiesen. Hat der Benutzer JavaScript deaktiviert, verhält sich das Formular wie jedes andere auch (ohne Fortschrittsanzeige, aber mit Blockieren), ist JavaScript aktiviert sieht der Benutzer die Fortschrittsanzeige und die Seite blockiert nicht.

<iframe src="upload.php" name="versteckt" style="display:none;"></iframe>
<form name="dateihochladen" action="upload.php" method="post" enctype="multipart/form-data">
<script type="text/javascript">document.forms.dateihochladen.target = 'versteckt';</script>

Fehlt nur noch der AJAX-Teil des ganzen. Vorher benötigt man allerdings noch eine PHP-Datei, die die Informationen über den Vorgang liefert.

<?php
var_dump(apc_fetch('upload_' . $_GET['id']));
?>

Mittels apc_fetch werden die Informationen aus dem Zwischenspeicher ausgelesen, hierzu wird die eindeutige ID benötigt, welche man praktischerweise einfach über die URL überträgt und mittels $_GET abfragt. Anstatt das komplette Feld mit allen Informationen per var_dump auszugeben, kann man es natürlich auch per json_encode umwandeln (und dann gleich im JavaScript weiterverwenden), oder per PHP gleich die Fortschrittsanzeige in HTML ausgeben. Aber das ist jedem selbst überlassen.

Der AJAX-Teil ist auch nicht weiter schwer, man ruft einfach nach dem Absenden des Formulars in bestimmten Zeitintervallen die obige PHP-Datei ab, und verarbeitet die Informationen weiter, bzw. gibt sie aus. Komplett sieht das ganze dann so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
  <head>
    <title>Fortschrittsanzeige beim Hochladen von Dateien</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
    function aktualisiere() {
      var anfrage = null;
 
      if (window.XMLHttpRequest) {
        anfrage = new XMLHttpRequest();
      }
      else if (window.ActiveXObject) {
        anfrage = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      anfrage.onreadystatechange = function() {
       if ((anfrage.readyState == 4) && (anfrage.status == 200)) {
          document.getElementById('status').innerHTML = anfrage.responseText;
        }
      }
 
      anfrage.open('GET', 'status.php?id=' + 
                    document.forms.dateihochladen.APC_UPLOAD_PROGRESS.value);
      anfrage.send(null);
    }
 
    function ladeHoch(elem) {
      elem.disabled = true;
 
      setInterval('aktualisiere()', 1000);
    }
    </script>
    <link rel="stylesheet" type="text/css" href="stil.css" />
  </head>
  <body>
    <h1>Dateien hochladen mit Fortschrittsanzeige</h1>
    <div id="inhalt">
      <iframe name="versteckt" style="display:none;"></iframe>
      <form name="dateihochladen" action="upload.php" 
            method="post" enctype="multipart/form-data">
      <script type="text/javascript">
        document.forms.dateihochladen.target = 'versteckt';
      </script>
        <fieldset>
          <legend>Datei</legend>
          <input type="hidden" name="APC_UPLOAD_PROGRESS" 
                 value="<?php echo uniqid(); ?>" />
          <input type="file" name="datei" />
          <input type="submit" value="Hochladen" 
                 onclick="ladeHoch(this);" />
        </fieldset>
        <div id="status"></div>
      </form>
    </div>
  </body>
</html>

In der Form funktioniert das Skript bereits, es macht aber nichts anderes, als das von APC zurückgegebene Feld mit Informationen im status-div auszugeben.

Welche Informationen bekommt man?

Welche Informationen APC zurückgibt hängt davon ab, ob die Datei gerade hochgeladen wird, oder der Hochladevorgang bereits abgeschlossen ist.

Wird die Datei gerade hochgeladen, enthält das von APC zurückgegebene Feld folgende Informationen:

Wenn der Hochladevorgang abgeschlossen wurde, kommen noch folgende Elemente hinzu:

Mehrere Dateien hochladen?

Es ist auch möglich den Hochladevorgang von mehreren Dateien zu überwachen, man kann aber erst nach dem Hochladen feststellen, wie groß jede einzelne Datei war/ist, da APC die Dateigrößen zusammenrechnet. Braucht man diese Information unbedingt, kann man mehrere Formulare mit je einer Datei, und unterschiedlichen APC_UPLOAD_PROGRESS-IDs erstellen.

Wie erstelle ich denn jetzt einen Fortschrittsbalken?

Wie man Fortschrittsbalken erstellt, habe ich in diesem Artikel beschrieben. Man könnte obiges Skript wie folgt modifizieren um einen Fortschrittsbalken zu implementieren (ich verwende in diesem Beispiel die dwProgressBar):
status.php

<?php
echo json_encode(apc_fetch('upload_' . $_GET['id']));
?>

hochladen.php

<!-- [...] -->
		<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
		<script src="dwprogressbar.js" type="text/javascript"></script>
		<script type="text/javascript">
			function aktualisiere() {
				var anfrage = null;
 
				if (window.XMLHttpRequest) {
					anfrage = new XMLHttpRequest();
				}
				else if (window.ActiveXObject) {
					anfrage = new ActiveXObject("Microsoft.XMLHTTP");
				}
 
				anfrage.onreadystatechange = function() {
					if ((anfrage.readyState == 4) && (anfrage.status == 200)) {
						var ergebnis = eval('(' + anfrage.responseText + ')');
						if (ergebnis.done == 1) {
							if (ergebnis.cancel_upload == 0) {
								document.getElementById('status').innerHTML = 'Hochgeladen!';
							}
							else {
								document.getElementById('status').innerHTML = 'Fehler/Abgebrochen.';
							}
						}
						else {
							//document.getElementById('status').innerHTML = Math.round((ergebnis.current * 100) / ergebnis.total) + '%';
							document.fsb.set(Math.round((ergebnis.current * 100) / ergebnis.total));
						}
					}
				}
 
				anfrage.open('GET', 'status.php?id=' + document.forms.dateihochladen.APC_UPLOAD_PROGRESS.value);
				anfrage.send(null);
			}
 
			function ladeHoch(elem) {
				elem.disabled = true;
 
				document.fsb = new dwProgressBar({
					container: $('status'),
					startPercentage: 0,
					speed: 1000,
					boxID: 'rahmen',
					percentageID: 'balken',
					step: 10,
					allowMore:0,
					displayID: 'text',
					displayText: true
				});
 
				setInterval('aktualisiere()', 1000);
			}
		</script>
		<style type="text/css">
			#rahmen {
				background:url('gfx/normal.png') right center no-repeat; width:300px; height:30px;
				display:inline-block;
			}
			#balken {
				background:url('gfx/farbig.png') left center no-repeat; height:30px;
			}
			#text {
				font-size:16px;
				line-height:20px;
				vertical-align:top;
				padding-left:10px;
				display:inline-block;
			}
		</style>
<!-- [...] -->

Ich hoffe ich konnte euch einen kleinen Einblick in das Thema Fortschrittsanzeige beim Hochladen von Dateien geben. Anhand dieses Artikels (und der vorangehenden zum Thema APC/Dateien hochladen) sollte es möglich sein, ein individuelles Formular zum Hochladen von Dateien, mit Fortschrittsbalken, etc. zu erstellen.

Die drei wichtigsten Einstellungen sind wohl die Größe des Zwischenspeichers, die Überwachung des Hochladevorgangs von Dateien, und ob APC bei jeder Anfrage überprüfen soll, ob eine Datei modifiziert wurde.

Die Größe des Zwischenspeichers

Die Größe des Zwischenspeichers lässt sich über die Konfigurationsoptionen apc.shm_size und apc.shm_segments einstellen. Erstere legt fest wie groß ein gemeinsames Speichersegment (Shared Memory) sein darf, letztere legt fest aus wie vielen solchen Segmenten der Zwischenspeicher besteht. Bei manchen Betriebssystemen können solche Speichersegmente nur wenige Megabytes groß sein, weswegen entweder mehrere Segmente verwendet werden müssen, oder die Betriebssystemkonfiguration angepasst werden muss. Linux hat standardmäßig eine maximale Segmentgröße von 32 MiB, BSD von 4 MiB.

; 2 Segmente von je 30 MiB = 60 MiB
apc.shm_size = 30
apc.shm_segments = 2

Hochladen von Dateien

Ist apc.rfc1867 eingeschaltet (On), legt APC beim Hochladen von Dateien einen Eintrag im Zwischenspeicher ab, der Informationen über den Hochladevorgang enthält. Mit diesen Daten lässt sich beispielsweise eine Fortschrittsanzeige realisieren. Damit APC einen solchen Eintrag erstellt, muss das Formular allerdings ein Feld mit einem bestimmten Namen, standardmäßig APC_UPLOAD_PROGRESS, haben. APC erstellt dann einen Eintrag im Zwischenspeicher mit dem Namen upload_<Schlüssel> wobei der Schlüssel dem Wert der value-Eigenschaft des Formularfeldes entspricht.

; Es sollen Informationen über den Hochladevorgang gespeichert werden.
apc.rfc1867 = On
; Benutze upload_ als Präfix für den Eintrag im Zwischenspeicher.
apc.rfc1867_prefix = upload_
; Name des versteckten Formularelementes, welches diese Funktionalität aktiviert.
apc.rfc1867_name APC_UPLOAD_PROGRESS
; Wie oft sollen die Informationen aktualisiert werden?
; 0 = So oft wie möglich. (Kann den Hochladevorgang verlangsamen)
; % = % der Dateigröße (z.B. 2% = alle 2% wird aktualisiert)
; <Zahl>< ,k,m,g> Nach  Bytes, Kilobytes, Megabytes oder Gigabytes.
apc.rfc1867 = 50k

Mehr Informationen zu dieser Funktion finden sich im Artikel Fortschrittsanzeige beim Hochladen von Dateien.

Wurde die Datei modifiziert?

Die Option apc.stat gibt an, ob bei jedem Aufruf überprüft werden soll, ob die Datei im Zwischenspeicher auch der Datei auf der Festplatte entspricht. Ist diese Option abgeschaltet (Off), wird keine Überprüfung durchgeführt, was zwar die Geschwindigkeit merklich verbessert, es aber auch nötig macht den Zwischenspeicher neu aufzubauen, damit die Änderungen am Quelltext einer Datei wirksam werden.

apc.stat = On

Auch wenn diese Option abgeschaltet ist, werden mit relativem Pfad inkludierte Dateien beim Inkludieren vorher überprüft. Bei absoluten Pfaden (also solchen die mit einem / beginnen), ist das nicht der Fall.

Viele gleichzeitige Zugriffe

Beim Starten von stark ausgelasteten Servern bzw. wenn viele Dateien modifiziert wurden, kann es passieren, dass mehrere Prozesse versuchen die gleiche Datei für den Zwischenspeicher zu kompilieren. Mittels apc.write_lock wird festgelegt, dass in diesem Fall nur ein Prozess die Datei zwischenspeichert, während die anderen Prozesse die noch nicht-zwischengespeicherte Datei einfach nur ausliefern. Ist die Option abgeschaltet, müssten die anderen Prozesse auf den ersten warten.

Überschreiben von Dateien

Wenn man eine Datei überschreibt, kann es passieren, das genau in dem Moment ein Zugriff auf diese Datei erfolgt. In dem Fall würde der Benutzer wahrscheinlich eine fehlerhafte Seite sehen (zum Teil die neue Datei, zum Teil noch die alte). Die Option apc.file_update_protection schützt davor, das eine erst zum Teil auf die Festplatte geschriebene Datei zwischengespeichert wird. Der Benutzer der in dem ungünstigen Moment auf die Datei zugreift bekommt zwar trotzdem eine fehlerhafte Seite ausgeliefert, aber die fehlerhafte Seite landet nicht im Zwischenspeicher.

; Um in den Zwischenspeicher zu kommen muss eine Datei min. 2 Sekunden alt sein.
apc.file_update_protection = 2

Auf Systemen mit hoher Festplattenauslastung ist es sinnvoll diesen Wert noch etwas zu erhöhen. Wenn man sich sicher ist, das Dateien immer atomar überschrieben werden, kann dieser Wert auf 0 gesenkt werden. (Beispielsweise wenn man die neue Datei erst in eine temporäre Datei schreibt und sie dann umbenennt.)

Lebenszeit von Dateien

Da die Größe des Zwischenspeichers begrenzt ist, könnte es unter Umständen passieren, dass dieser voll wird und kein Platz mehr für neue Dateien/Variablen ist. APC bietet allerdings die Möglichkeit Dateien oder Variablen auf die eine bestimmte Zeit lang nicht mehr zugegriffen wurde, aus dem Zwischenspeicher zu nehmen, um wieder Platz zu schaffen. Diese Funktion wird durch die Optionen apc.ttl (für Dateien) und apc.user_ttl (für Variablen) beeinflusst, welche festlegen, wie lange eine Datei/Variable nicht mehr aufgerufen werden darf bevor sie entfernt wird. Ist dieser Wert 0, ist die Funktion abgeschaltet. In diesem Fall wird der Zwischenspeicher komplett geleert, wenn er voll ist.

Außerdem gibt es noch apc.gc_ttl, wodurch bestimmt wird, wie oft APC den Zwischenspeicher auf veraltete Dateien überprüft, bzw. diese löscht.

apc.ttl = 0
apc_user_ttl = 0
apc.gc_ttl = 3600

Filtern von Dateien

Standardmäßig speichert APC alle aufgerufenen PHP-Dateien im Zwischenspeicher. Mithilfe von Filtern kann man aber einstellen, das nur bestimmte Dateien zwischengespeichert werden, bzw. bestimmte Dateien nicht in den Zwischenspeicher kommen. Dazu wird die Option apc.filters verwendet, diese erwartet eine durch Komma getrennte Liste von regulären Ausdrücken. Ein + oder ein – vor jedem Ausdruck legt fest ob auf den Ausdruck passende Dateien zwischengespeichert werden (+) oder nicht gespeichert werden (-). Wird das Plus/Minus weggelassen, wird Minus angenommen.

Die Option apc.cache_by_default gibt an ob APC standardmäßig alle PHP-Dateien zwischenspeichert, oder keine. Mit apc.max_file_size können außerdem Dateien ab einer bestimmten Größe vom Zwischenspeicher ausgeschlossen werden.

; Alle Dateien zwischenspeichern
apc.cache_by_default = 1
; Ausser: Dateien in /nicht_zwischenspeichern/ und
; die Datei mit dem Namen blablabla.php
apc.filters = "/nicht_zwischenspeichern/.*,blablabla\.php"
; Keine Datei groesser als 1 MB
apc.max_file_size = 1M

Hinweis: Beim Inkludieren von Dateien wird dieser Filter auf den Dateinamen der in der include-Anweisung steht angewendet, nicht auf den absoluten Pfad der Datei.

Tabelle: Alle Optionen

In dieser Übersicht stehen noch mal alle Optionen, mit den Standardwerten und einer sehr kurzen Beschreibung. Eine ausführlichere Beschreibung der Optionen findet sich im PHP-Handbuch. Wenn bei Zeitangaben keine Einheit dabei steht, sind Sekunden gemeint.

Einige Optionen sind veraltet, und sollten nicht mehr verwendet werden.

• apc.optimization
• apc.slam_defense (anstatt dessen sollte apc.write_lock verwendet werden.)

APC ist eine PECL-Erweiterung, die nicht zum Installationsumfang von PHP 5 gehört. Ab PHP 6 soll APC standardmäßig in PHP enthalten sein. Ob APC bereits installiert ist, kann man in der Ausgabe von phpinfo() sehen.

Es gibt zwei Möglichkeiten APC zu installieren: Entweder man installiert es über die Paketverwaltung der verwendeten Linux-Distribution, was die Vorteile hat, das man sich über die Abhängigkeiten keine Gedanken machen muss, und das es von der Paketverwaltung (meistens) schon automatisch aktiviert wird. Die andere Möglichkeit ist die Installation mittels PECL.

Installation über die Paketverwaltung

Viele Distributionen bieten bereits Pakete für APC an, ist das bei der verwendeten Distribution nicht der Fall, muss es über PECL installiert werden. Bei Debian heißt das Paket php-apc, bei Gentoo pecl-apc, bei anderen Distributionen wahrscheinlich ähnlich. Hier hilft einem die Suchfunktion der entsprechenden Paketverwaltung.

# Debian
apt-get install php-apc
# Gentoo
emerge pecl-apc

Die meisten Paketverwalter aktivieren APC automatisch (tragen die Erweiterung in eine PHP-Konfigurationsdatei ein), es sollte also nur noch ein Neustart des Webservers nötig sein (siehe weiter unten).

Installation mit PECL

Wenn alle für die Installation benötigten Programme/Abhängigkeiten installiert sind, kann APC mittels folgendem Befehl installiert werden:

pecl install apc

Zur Installation werden die Entwicklerpakete von PHP und dem Webserver (Apache) vorausgesetzt, außerdem werden ein Compiler (gcc), sowie div. andere Entwicklerpakete wie beispielsweise make benötigt. Wenn etwas fehlt, wird PECL einen bei der Installation darauf hinweisen, das entsprechende Programm/Paket kann man dann einfach über die Paketverwaltung installieren.

Mehr Informationen über die Installation von PHP-Erweiterungen mittels PECL finden sich in der PHP-Dokumentation.

Nach der erfolgreichen Installation muss APC noch in einer Konfigurationsdatei von PHP (es kann mehrere geben) eingetragen und der Webserver neugestartet werden.

APC-Modul laden

Nachdem APC installiert wurde, muss noch dafür gesorgt werden, das PHP das Modul auch lädt. Dazu muss in einer Konfigurationsdatei, die PHP beim Start auswertet (z.B. der php.ini) ein Eintrag gemacht werden. Wenn APC über die Paketverwaltung installiert wurde, ist solch ein Eintrag wahrscheinlich sogar schon vorhanden. Dies kann man überprüfen indem man den Webserver neustartet und sich die Ausgabe von phpinfo() ansieht. Ansonsten muss man ihn selbst hinzufügen.

Wo befindet sich die PHP-Konfigurationsdatei?

Um herauszufinden, wo sich die Konfigurationsdatei von PHP befindet, legt man einfach eine PHP-Datei mit folgendem Inhalt an:

<?php phpinfo(); ?>

Wenn man diese Datei nun im Browser aufruft, erhält man eine Übersicht der PHP-Konfiguration. Am Anfang unter dem Eintrag Loaded Configuration File steht, wo sich die Konfigurationsdatei von PHP befindet. Unter additional .ini files parsed finden sich weitere Konfigurationsdateien die von PHP ausgewertet werden, ist hier schon eine apc.ini dabei, hat die Paketverwaltung APC wohl schon aktiviert.

Wichtig: Auf einem produktiven System sollte man die Datei in der phpinfo() aufgerufen wird wieder löschen oder zumindest für normale Benutzer unzugänglich machen, nachdem man die benötigten Informationen hat. Sonst könnte jeder der den Namen der Datei kennt, herausfinden wie der Server konfiguriert ist.

Eintrag in der Konfigurationsdatei

Ist noch kein Eintrag für APC vorhanden, muss er hinzugefügt werden. Dazu schreibt man folgendes in die Konfigurationsdatei:

extension=apc.so

Nach einem Neustart des Webservers sollte APC dann automatisch geladen werden. Das kann ebenfalls in der Ausgabe von phpinfo() überprüft werden, dort müsste irgendwo ein Eintrag mit der Überschrift apc angezeigt werden.

Webserver neustarten

Damit eine geänderte PHP-Konfiguration wirksam wird, muss der Webserver angewiesen werden, diese neu einzulesen. Dazu ist ein Neustart des Webservers erforderlich. Beim Apache kann einer der folgenden beiden Befehle dazu verwendet werden.

apache2ctl graceful
/etc/init.d/apache2 graceful

Nach der Installation

Die Standardkonfiguration ist für die meisten Anwender gut geeignet, einige Optionen wie beispielsweise die Größe des Zwischenspeichers kann man aber noch anpassen. Welche Konfigurationsmöglichkeiten es gibt, wird im Artikel Konfiguration von APC beschreiben.

In dieser Anleitung erkläre ich wie man einfache Fortschrittsbalken mit CSS erstellen kann, und stelle 4 JavaScript-Skripte vor mit denen sich “bewegliche” Fortschrittsbalken erstellen lassen.

Einfache Fortschrittsbalken

Fortschrittsbalken mittels CSS zu erstellen ist nicht weiter schwer, man braucht im Grunde nur zwei Elemente, die übereinander gelegt werden.

Ohne Bilder

Man erstellt ein Element, gibt ihm eine Hintergrundfarbe und weist ihm eine Breite/Höhe zu. In diesem Element erstellt man nun ein zweites Element, dem man ebenfalls eine Hintergrundfarbe (möglichst eine andere, als die vom ersten Element) und die gleiche Höhe wie dem ersten Element zu. Die Breite des zweiten Elements gibt dann an, welchen Wert der Fortschrittsbalken anzeigen soll.

<style type="text/css">
  div.fsb {
    border:1px solid #000;
    background-color:white;
    width:200px;
    height:28px;
    padding:1px;
  }
 
  div.fortschritt {
    background-color:#000;
    height:28px;
    width:50%; /* Fortschritt */
  }
</style>
<!-- [...] -->
<div class="fsb">
  <div class="fortschritt"></div>
</div>

In Aktion sieht das dann so aus: Demo.

Mit Bildern

Möchte man den Fortschrittsbalken etwas schöner gestalten, kann man natürlich auch Bilder verwenden, die Methode funktioniert eigentlich genau so. Der einzige Unterschied ist, das anstatt von Hintergrundfarben Bilder verwendet werden.

div.fsb {
    background:url('normal.png') no-repeat left center;
    width:300px;
    height:30px;
}
 
div.fortschritt {
    background:url('farbig.png') no-repeat left center;
    height:30px;
    width:50%;
}

In Aktion sieht das dann so aus: Demo.

JavaScript-Fortschrittsbalken

Mit JavaScript kann man den Fortschrittsbalken auch Leben einhauchen, bzw. den angezeigten Wert verändern. Ein einfaches JS-Skript, welches die Breite des inneren Elements ändert ist schnell geschrieben. Im folgenden stelle ich allerdings 4 Skripte/Klassen vor, die noch etwas mehr können als nur das. Das erste Skript basiert auf jQuery/jQuery UI, das zweite benötigt nur jQuery, das dritte ist für Prototype und das vierte verwendet mootools.

Ich habe für jedes Skript eine Demo erstellt: Fortschrittsbalken-Demo

jQueryUI – ProgressBar

Die JS-Bibliothek jQuery UI stellt diverse Werkzeuge und Benutzeroberflächen-Elemente bereit. Unter anderem bietet sie auch eine Klasse zur Erstellung von Fortschrittsbalken. Praktischerweise kann man auf der Download-Seite von jQuery UI direkt die Elemente angeben, die man benötigt, so braucht man nicht die ganze Bibliothek runterzuladen/einzubinden (wenn man nur den Fortschrittsbalken braucht), und spart so einiges an Speicherplatz/Datentransfer. Die Bibliothek basiert auf jQuery, dieses muss also auch eingebunden werden.

Eine Besonderheit von jQuery UI: Das Aussehen der Benutzeroberfläche (und somit des Fortschrittsbalkens) wird durch Themen festgelegt. Auf der Webseite von jQuery UI findet sich (unter Gallery) bereits eine kleine Auswahl von fertigen Themen, natürlich ist es auch möglich eigene Themen zu erstellen. Das Thema wird über eine css-Datei definiert, diese muss ebenfalls in die Seite eingebunden werden.

Einbinden

Benötigt werden: jQuery, jQuery UI (Progressbar), und ein jQuery UI Thema.

<link rel="stylesheet" href="jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="jquery-ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

(Die Pfade müssen eventuell angepasst werden.)

HTML

Man erstellt einfach ein div-Element, den Rest erledigt das Skript. Dem Element kann man noch eine ID geben, das macht es leichter es anzusprechen.

<div id="fsb"></div>

Fortschrittsbalken erstellen

Um den Balken zu erstellen, selektiert man das Ziel-Element mit der $()-Funktion, und ruft die Methode progressbar() auf. Mittels dem Parameter value kann man den Ausgangswert des Fortschrittsbalkens angeben. Außerdem kann man, wenn man möchte, mit dem Parameter change auch gleich eine Funktion festlegen, welche aufgerufen wird, wenn der Wert sich ändert. Beide Parameter sind optional.

$(function () {
    $('#fsb').progressbar({
        value:50,
        change: function () { 
            alert($('#fsb').progressbar('option', 'value') + '%');
        }
    });
});

Methoden und Ereignisse

Die Klasse bietet Methoden zum Abfragen und Ändern des angezeigten Werts, sowie ein Ereignis welches ausgelöst wird, wenn der Wert sich ändert.

// Wert aendern
$('#fsb').progressbar('option', 'value', 50);
// Wert abfragen
var wert = $('#fsb').progressbar('option', 'value');

Weitere Informationen zu der Klasse und ihren Methoden finden sich in der offiziellen Dokumentation.

jQuery – ProgressBar

Das Skript jQuery Progress Bar basiert auf jQuery und bietet einige nützliche Funktionen, die die jQuery UI-Variante nicht hat. Es ist möglich verschiedene Bilder zur Anzeige des Fortschritts zu verwenden, so kann man beispielsweise für die ersten 10-20% einen roten Hintergrund, für die nächsten 10-20% dann einen orangen, dann einen gelben und zum Schluss einen grünen Hintergrund verwenden. Es lässt sich auch festlegen ob neben dem Balken auch der Fortschritt noch einmal als Prozentzahl angezeigt werden soll, und auch eine Anzeige des genauen Wertes (123/465) ist möglich. Außerdem ist die Bewegung des Fortschrittsbalkens animiert, es lässt sich sogar die Geschwindigkeit der Animation festlegen.

Einbinden

Benötigt werden jQuery und das Skript selbst.

<script src="jquery-ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.progressbar/js/jquery.progressbar.js" type="text/javascript"></script>

HTML

Auch bei diesem Skript wird nur ein div-Element benötigt, den Rest erstellt das Skript selbst.

<div id="fsb"></div>

Fortschrittsbalken erstellen

Erstellt wird der Fortschrittsbalken mittels der Funktion progressBar(). Dabei gibt es einige Parameter, mittels derer das Aussehen und Verhalten des Fortschrittsbalkens beeinflusst werden können:

• steps und step_duration: Geben an, wie viele Schritte beim Ändern des Anzeigewertes gegangen werden sollen, und wie lange ein Schritt dauert. (Standard: 20/20)
• max: Der max. Wert, bis zu dem der Fortschrittsbalken geht. (Standard: 100)
• showText und textFormat: Ob neben dem Balken noch der Fortschritt in Textform angezeigt werden soll, und ob dieser als Prozentzahl ('percentage' = 50%) oder als Anteil ('fraction' = 50/100) angezeigt werden soll. (Standard: true, 'percentage')
• width und height: Breite und Höhe des Fortschrittsbalkens bzw. der verwendeten Bilder.
• callback: Legt eine Funktion fest, welche aufgerufen wird, wenn sich der Balken bewegt. Die Funktion bekommt ein Argument mitgeliefert, welches das config-Feld, erweitert um die Werte increment (um wie viele Pixel hat sich der Balken bewegt), running_value (aktueller Wert) sowie value (Ziel-Wert).
• boxImage: Pfad zum Bild welches den Balken umschließt.
• barImage: Pfad zum inneren Bild des Balkens. Hier kann auch ein Feld übergeben werden, falls verschiedene Bilder verwendet werden sollen (siehe Beispiel).

$(function () {
    $('#fsb').progressBar(20, {
        boxImage: 'jquery.progressbar/images/progressbar.gif',
        barImage: {
            0: 'jquery.progressbar/images/progressbg_red.gif',
            30: 'jquery.progressbar/images/progressbg_orange.gif',
            50: 'jquery.progressbar/images/progressbg_yellow.gif',
            70: 'jquery.progressbar/images/progressbg_green.gif'
        }
    });
});

Methoden und Ereignisse

Die Klasse bietet ein Ereignis (callback) und keine Methode. Will man den angezeigten Wert ändern, ruft man die Klasse einfach wieder wie folgt auf:

// Aendere Wert auf 50%.
$('#fsb').progressBar(50);

Prototype – jsProgressBarHandler

Die jsProgressBarHandler-Klasse basiert auf Prototype und steht unter der Creative Commons Attribution-Share Alike 2.5 Lizenz. Das tolle an dieser Klasse ist: Sie kann auch automatisch Fortschrittsbalken erstellen, alle span-Elemente mit der CSS-Klasse progressBar, die einen Prozentwert enthalten, werden automatisch zu Fortschrittsbalken umgewandelt. Der herkömmliche Weg über JavaScript funktioniert natürlich auch.

Einbinden der Klasse

Neben der Klasse selbst, muss auch die JavaScript-Bibliothek Prototype eingebunden werden.

<script src="js/prototype/prototype.js" type="text/javascript"></script>
<script src="js/bramus/jsProgressBarHandler.js" type="text/javascript"></script>

HTML

Die Klasse wandelt alle span-Elemente mit der CSS-Klasse progressBar automatisch in Fortschrittsbalken um.

<span class="progressBar" id="fsb">50%</span>

Möchte man den Balken selbst mittels JavaScript erstellen, benötigt man ein div-Element mit einer ID.

<div id="fsb">[Lade Fortschrittsbalken]</div>

Fortschrittsbalken erstellen

Um den Balken selbst mittels JavaScript zu erstellen, muss man nur ein Objekt der Klasse JS_BRAMUS.jsProgressBar erstellen.

var fsb = new JS_BRAMUS.jsProgressBar(
    'fsb', // ID des div-Elements
    50, // Ausgangswert (Prozent)
    {
        showText : true,
        animate : true,
        barImage : 'jsprogressbarhandler/images/bramus/percentImage_back1.png'
    }
);

Der dritte Parameter kann zur Konfiguration verwendet werden, und ist optional. Folgende Optionen gibt es:

• animate: Ob der Fortschrittsbalken animiert sein soll. (Standard: ja)
• showText: Ob der Wert neben dem Balken angezeigt werden soll (Standard: ja)
• width: Breite des Balkens. Nicht vergessen: Das Bild muss ebenfalls angepasst werden. (Standard: 120)
• boxImage: Das Bild um den Balken.
• barImage: Der Hintergrund des Balkens. Hier kann auch ein Feld mit mehreren Bildern angegeben werden, dann ändert sich der Hintergrund, wenn der Balken weiter fortschreitet.
• height: Die Höhe des Balkens. (Standard: 12)
• onTick: Funktion die bei jeder Änderung am Wert des Balkens aufgerufen wird.

Die Standardwerte sind am Anfang der jsProgressBarHandler.js definiert. Dort findet sich auch die Variable autoHook, diese kann man auf false setzen, wenn man nicht möchte, das alle span.progressBar-Elemente automatisch umgewandelt werden. Die Pfade zu den Bildern bzw. die Breite/Höhe will/muss man wahrscheinlich eh ändern.

Methoden und Ereignisse

Die Klasse hat zwei Funktionen und ein Ereignis, welches bei jeder Änderung am Wert aufgerufen wird (onTick). Mit der Funktion getPercentage() kann der aktuelle Wert abgefragt werden, mit setPercentage() kann der Wert verändert werden. Letztere Funktion akzeptiert zwei Parameter, der erste gibt den neuen Wert an, der zweite gibt an ob der Balken direkt zum neuen Wert gehen soll. Wenn man den Wert ändert, während der Balken sich noch bewegt, macht er normalerweise zuerst seine Bewegung zu Ende, bevor er zum neuen Wert geht, ist der zweite Parameter true, verwirft er alle anderen Bewegungen und bewegt sich direkt zum neuen Wert.

// Wert abfragen
var aktuellerWert = fsb.getPercentage();
// Wert aendern
fsb.setPercentage(100);

mootools – dwProgressBar

Die dwProgressBar-Klasse verfolgt einen etwas anderen Ansatz, als die vorigen beiden Klassen. Mit der Klasse können Fortschrittsbalken erstellt, und der angezeigte Wert geändert werden. Um die Animation kümmert sich die Klasse. Ansonsten können (müssen) die Fortschrittsbalken komplett selbst mittels CSS gestaltet werden.

Einbinden der Klasse

Die JavaScript-Bibliothek mootools wird vorausgesetzt. Außerdem muss natürlich die Klasse selbst eingebunden werden.

<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script src="dwprogressbar.js" type="text/javascript"></script>

HTML und CSS

Es wird nur ein div-Element benötigt.

<div id="fsb"></div>

Die Gestaltung des Fortschrittsbalkens übernimmt die Klasse nicht, das muss man selber machen. Es gibt drei Elemente, die gestaltet werden können: Der Rahmen, der Balken, und der Text (optional). Beim Erstellen des Fortschrittsbalkens kann angegeben werden, welche ID die Elemente bekommen sollen, über die ID können die Elemente dann mittels CSS gestaltet werden.

Ohne Bilder

Die CSS-Selektoren für einen Fortschrittsbalken ohne Bilder (aber mit Text) könnten z.B. so aussehen:

#rahmen {
	border:1px solid #8C2229;
	width:200px;
	height:20px;
	padding:1px;
	display:inline-block;
}
 
#balken {
	background:#8C2229;
	height:20px;
}
 
#text {
	font-size:16px;
	line-height:20px;
	vertical-align:top;
	padding-left:10px;
	display:inline-block;
}

Mit Bildern

Wenn man den Fortschrittsbalken mit Bildern gestalten möchte, kann man folgende CSS-Selektoren verwenden. Die Höhen- und Breitenangaben müssen natürlich angepasst werden.

#rahmen {
	background:url('rahmen.png') right center no-repeat;
	width:300px;
	height:30px;
}
 
#balken {
	background:url('balken.png') left center no-repeat;
	height:30px;
}

Den Fortschrittsbalken erstellen

Zum Erstellen des Fortschrittsbalkens wird einfach ein neues dwProgressBar-Objekt erstellt.

window.addEvent('domready', function() {
    var fsb = new dwProgressBar({
        // Das Element, in dem der Fortschrittsbalken angezeigt wird
        container: $('fortschrittsbalken'),
        // Startwert (Prozent)
        startPercentage: 50,
        // Geschwindigkeit/Dauer der Animation (in Millisekunden)
        speed: 1000,
        // Die ID des Rahmens
        boxID: 'rahmen',
        // Die ID des Balkens
        percentageID: 'balken',
        // Wieviel Prozent pro Schritt (dwProgressBar.step() geht
        // immer einen Schritt weiter, in diesem Beispiel also 10%.
        step: 10,
        // Erlaube Werte jenseits 100%
        allowMore: false,
        // Prozentwert als Text anzeigen?
        displayText: true,
        // ID für das Textelement
        displayID: 'text',
        // Ereignis, welches aufgerufen wird, wenn der Balken 100%
        // erreicht.
        onComplete: function () {
            alert("Fertig!");
        },
        // Ereignis welches nach jeder abgeschlossenen Änderung am
        // Wert aufgerufen wird. (Wenn man von 10% auf 50% geht,
        // wird es einmal aufgerufen, nämlich wenn 50% erreicht sind.)
        onChange: function () {
            alert("Wert geändert!");
        }
    });
});

Es müssen nur die Optionen container, boxID und percentageID angegeben werden, der Rest ist optional.

Funktionen und Ereignisse

Die Klasse bietet die Funktionen set(neuerwert) und step(), außerdem die Ereignisse onComplete und onChange. Die Ereignisse sind im obigen Beispielquelltext bereits erklärt.

// Wert auf 100% setzen
fsb.set(100);
// Einen Schritt weitergehen (um options.step Prozent)
fsb.step();

Zum Schluss noch einmal die Demo-Seite für die JavaScript-Fortschrittsbalken: Fortschrittsbalken-Demo

Eine Lösung wäre, dass man eine Schaltfläche erstellt, mittels derer der Benutzer weitere Eingabefelder hinzufügen kann. Neben den zusätzlichen Eingabefeldern erstellt man dann einfach noch jeweils eine Schaltfläche zum Entfernen des Eingabefeldes, falls der Benutzer es sich anders überlegt.

Eine andere Möglichkeit wäre, das der Benutzer nur ein Eingabefeld, und eine Liste von ausgewählten Dateien hat. Nachdem eine Datei ausgewählt wurde, wird kommt die Datei in die Liste, und das Eingabefeld ist wieder leer, für die nächste Datei. Eigentlich wird das Eingabefeld dabei durch ein neues ersetzt, und das alte unsichtbar gemacht. Für den Benutzer sieht es aber so aus, als würde er die ganze Zeit dasselbe Eingabeelement benutzen.

Weitere Eingabefelder hinzufügen

Mittels der JavaScript-Funktion document.createElement(element) können dynamisch neue Elemente erstellt werden, diese können dann mit Funktionen wie appendChild, insertBefore, o.Ä. an beliebiger Stelle eingefügt werden.

Um eine Schaltfläche zum Hinzufügen zusätzlicher Eingabefelder zu erstellen, braucht man zuerst ein Verweis-Element, oder irgendein anderes Element, mittels dem der Benutzer das neue Eingabefeld hinzufügt. Damit das funktioniert, weist man dem onlick-Attribut eine Funktion zu, die ein neues Eingabefeld erstellt und im Dokument einfügt. Diese Funktion könnte zum Beispiel so aussehen:

function hinzu(element) {
    var neu = document.createElement('div');
    neu.innerHTML = '<input type="file" class="datei" name="datei[]" />';
    element.parentNode.parentNode.appendChild(neu);
}

Mittels parentNode greift man auf den Elternknoten des Elementes zu. Im Beispiel wird das neue div-Element welches das Eingabeelement enthält am Ende vom form-Element eingefügt.

<form>
  <div>
    <input type="file" class="datei" name="datei[]" />
    <a href="#" class="hinzu" onclick="hinzu(this); return false;">Datei hinzufügen</a>
  </div>
<!-- An dieser Stelle werden neue Eingabeelemente eingefügt, wenn auf den
    Verweis geklickt wird. Also z.B. so: -->
  <div>
    <input type="file" class="datei" name="datei[]" />
  </div>
<!-- Ende -->
</form>

Der Benutzer soll die hinzugefügten Eingabeelemente aber auch wieder entfernen können, dazu fügt man zu jedem Element noch eine Schaltfläche zum Entfernen hinzu. Dieser weist man eine JavaScript-Funktion zu, die das Elternelement (und somit auch alle Elemente darin) löscht. Der komplette Quelltext könnte (aufs nötigste reduziert) so aussehen:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Mehrere Dateien flexibel hochladen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
      function hinzu(element) {
        var neu = document.createElement('div');
        neu.innerHTML = '<input type="file" class="datei" name="datei[]" /> \
          <a href="#" class="weg" onclick="loeschen(this); return false;">entfernen</a>';
        element.parentNode.parentNode.appendChild(neu);
      }
 
      function loeschen(element) {
        element.parentNode.parentNode.removeChild(element.parentNode);
      }
    </script>
  </head>
  <body>
    <form>
      <div>
        <input type="file" class="datei" name="datei[]" />
        <a href="#" class="hinzu" onclick="hinzu(this);">Datei hinzufügen</a>
      </div>
    </form>
  </body>
</html>

Auf der Demo-Seite sieht man das Skript auch in Aktion.

Demo

Eingabefeld + Liste

Ein einzelnes Eingabefeld, und eine Liste ausgewählter Dateien zu erstellen ist schon etwas komplizierter. Zum Glück haben sich schon andere die Arbeit gemacht. Es gibt sowohl für mootools, als auch für jQuery entsprechende Erweiterungen.

Für jQuery

Für jQuery gibt es das jQuery Multiple File Upload Plugin. Es bietet zusätzlich noch die Möglichkeit die verwendbaren Dateitypen einzuschränken und eine maximale Anzahl von Dateien anzugeben.

Einbinden und Benutzen

Zuerst müssen jQuery und die Erweiterung im head-Bereich eingebunden werden. Außerdem gibt es noch drei weitere (optionale) Erweiterungen, mit denen die Multi File Upload Erweiterung zusammenarbeiten kann: MetaData, BlockUI, und Form. Ersteres ermöglicht es das Element direkt über das class-Attribut des input-Elements zu konfigurieren, mit BlockUI werden schönere Fehlermeldungen angezeigt, und Form ermöglicht das Absenden des Formulars mittels AJAX.

<!-- jQuery wird vorausgesetzt. -->
<script src="jquery.js" type="text/javascript"></script>
<!-- Die Erweiterung selbst. -->
<script src="jquery.MultiFile.js" type="text/javascript"></script>

Anschließend muss nur noch das input-Element entsprechend angepasst werden:

<input type="file" accept="png|gif|jpg|xcf" class="multi" maxlength="3" name="bild" />
<!-- oder -->
<input type="file" class="multi accept-png|gif|jpg|xcf max-3" name="bild" />

Die Klasse multi sorgt dafür, das die Erweiterung sich dem Element annimmt. Mittels maxlength/accept lassen sich noch die max. Anzahl Dateien bzw. die akzeptierten Dateitypen festlegen.

Alternativ ist es auch möglich das Element mittels einer JavaScript-Funktion umzuwandeln. Dabei können außerdem noch einige weitere Parameter angegeben werden.

$(function() {
    $('input.datei').MultiFile({
        list: '#liste',
        max: 3,
        afterFileRemove : function (e, v, m) { alert("Datei entfernt!"); },
        afterFileSelect : function (e, v, m) { alert("Datei hinzugefügt!"); },
        STRING: { file: '<em title="Zum entfernen hier klicken" \
                         onclick="$(this).parent().prev().click()">$file</em>',
                  remove: '<img src="entfernen.png" alt="X" \
                           style="height:24px; width:24px; \
                           vertical-align:middle;border:0;" />'
        }
    });
});

So lässt sich beispielsweise festlegen, in welchem Element die Liste der ausgewählten Dateien angezeigt wird und welche Texte für die Fehlermeldungen verwendet werden. Außerdem können Funktionen angegeben werden die beispielsweise beim Auswählen oder Entfernen einer Datei ausgeführt werden.

Ausführlichere Informationen und einige weitere Beispiele finden sich auf der Webseite der Erweiterung.

Webseite: jQuery Multiple File Upload Plugin
Demo

Mit mootools

Für mootools gibt es ebenfalls eine Erweiterung.

Einbinden und Benutzen

Um diese Erweiterung zu benutzen, müssen zuerst mootools und die Erweiterung selbst eingebunden werden.

<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script src="Stickman.MultiUpload.js" type="text/javascript"></script>

Das input-Element braucht keine bestimmte Klasse.

<form id="formular">
    <input type="file" name="datei" />
</form>

Nun muss nur noch ein MultiUpload-Objekt erstellt werden.

window.addEvent('domready', function() {
    new MultiUpload($('formular').datei, 3, '[]', true, true);
});

Der erste Parameter ist das input-Element, die folgenden 4 Parameter sind optional:

• Maximale Anzahl von Dateien (Standard: 0/unlimitiert).
• Was an den Namen des Elements angehangen wird (Standard: _{id}).
• Pfad anzeigen? (Standard: nein).
• Leeres Element entfernen, bevor das Formular abgeschickt wird? (Standard: ja).

Die Liste der ausgewählten Dateien lässt sich mittels CSS umgestalten.

Auch für diese Erweiterung habe ich wieder eine Demo-Seite eingerichtet:

Demo ]]> http://www.antusblog.de/2009/07/22/mehrere-dateien-flexibel-hochladen/feed/ 3 http://www.antusblog.de/2009/07/04/formulare-datei-element-umgestalten/ http://www.antusblog.de/2009/07/04/formulare-datei-element-umgestalten/#comments Sat, 04 Jul 2009 11:23:33 +0000 Antu http://www.antusblog.de/?p=1687 Das Formularelement zum Auswählen einer Datei lässt sich nicht mittels CSS umgestalten, der Browser verwendet für dieses Element immer das Standardaussehen, so wie es vom Betriebssystem vorgegeben ist. Bei der Gestaltung von Formularen ist das natürlich ärgerlich, da das Element meistens nicht zum Aussehen der anderen Formularelemente passt.

Shaun Inman beschreibt in seinem Artikel Styling File Inputs with CSS and the DOM eine Methode diesem Element mittels Java Script und CSS trotzdem ein anderes Aussehen zu verpassen. Wie seine Methode funktioniert, und wie man sie noch verbessern/erweitern kann, erkläre ich in diesem Artikel.

Funktionsweise seiner Methode

Man erstellt ein Element, welches die Schaltfläche darstellen soll. Dieses Element kann man mit CSS gestalten, ihm beispielsweise mittels der background-Eigenschaft ein Hintergrundbild zuweisen. Innerhalb dieses Elements befindet sich dann das input-Element.

<label class="durchsuchen">
    <input type="file" name="datei" class="datei">
</label>

Dieses wird allerdings mittels opacity zu 100% transparent gemacht, so dass man es nicht sieht. Wenn man auf die sichtbare Schaltfläche klickt (also die, die man beliebig mit CSS formatieren kann), klickt man in Wirklichkeit auf die Durchsuchen-Schaltfläche des Eingabeelementes.

Die Durchsuchen-Schaltfläche ist allerdings von Betriebssystem zu Betriebssystem verschieden groß. Wenn die Schaltfläche die man selbst gestaltet hat größer ist, könnte es passieren, das man darauf klickt und nichts passiert. Deswegen muss dafür gesorgt werden, das die echte Durchsuchen-Schaltfläche immer unter der Maus ist, wenn die Maus über der “gefälschten” Schaltfläche ist. Hier kommt dann Java Script ins Spiel, sobald die Maus über der Schaltfläche ist, wird das input-Element so bewegt, das die Durchsuchen-Schaltfläche unter der Maus ist.

Diese Methode hat allerdings einen Nachteil: Es ist zwar möglich, neben der Schaltfläche noch ein Eingabefeld hinzuzufügen, welches den Dateinamen/Pfad der ausgewählten Datei anzeigt, es ist aber nicht möglich dieses Eingabeelement zu verändern, bzw. anschließend den Wert des input-Elements anzupassen/zu verändern. Das geht bei Dateielementen aus Sicherheitsgründen nicht, denn sonst könnte ein böswilliger Programmierer ja ein verstecktes Dateielement erstellen, welches ohne das der Benutzer davon etwas mitbekommt Dateien von seinem Recher hochlädt.

Vorteile:

• Dateielemente können an das Aussehen der Webseite/der anderen Formularelemente angepasst werden.
• Wenn der Browser des Benutzers kein Java Script unterstützt, sieht der Benutzer einfach das normale Dateielement.

Nachteile:

• Etwas umständlich.
• Der Benutzer kann den Pfad zur Datei nicht mehr direkt im Eingabefeld eingeben, er muss die Durchsuchen-Schaltfläche benutzen.

Ich habe auch wieder eine Demo-Seite eingerichtet: Demo.

Benutzung

Zuerst wird das Skript im head-Bereich eingebunden, dann muss/will man noch die Schaltfläche mit CSS gestalten, außerdem muss das Dateielement sich innerhalb des umgestalteten Elementes befinden. Ein Aufruf von SI.Files.stylizeAll() wendet das Skript dann an.

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Dateielement umgestalten</title>
        <style type="text/css">         
            .SI-FILES-STYLIZED label.durchsuchen {
                /* Hier kann die Schaltflaeche gestaltet werden. */
                width:140px;
                height:30px;
                background: url('durchsuchen.png') 0 0 no-repeat;
                display:inline-block;
                overflow:hidden;
                cursor:pointer;
            }
 
            .SI-FILES-STYLIZED label.durchsuchen input.datei {
                position:relative;
                height:100%;
                width:auto;
                opacity:0;
                -moz-opacity:0;
                filter:alpha(opacity=0); 
            }
        </style>
        <script type="text/javascript" src="si.files.js"></script>
    </head>
    <body>
        <form action="..." enctype="multipart/form-data" method="post">
            <label class="durchsuchen">
                <input type="file" class="datei" name="datei">
            </label>
            <input type="submit" value="Hochladen" />
            <script type="text/javascript">
                SI.Files.stylizeAll();
            </script>
        </form>
    </body>
</html>

Das Skript weist dem html-Element die Klasse SI-FILES-STYLIZED zu. Der erste CSS-Selektor des Beispiels ist für die sichtbare Schaltfläche, hier kann diese umgestaltet werden. Der zweite Selektor sorgt dafür das das input-Element nicht sichtbar ist. Anstatt eines label-Elements kann natürlich auch irgendein anderes Element verwendet werden, die Klassennamen sind auch austauschbar.

Internet Explorer 7

Der Internet Explorer 7 macht leider ein paar Probleme, das Fenster zum Auswählen einer Datei öffnet sich, egal wo man klickt, nachdem man mit der Maus einmal über dem input-Element war. Glücklicherweise hat jemand namens jxtps eine Lösung für dieses Problem gefunden (siehe Kommentar 29 zum Artikel von Shaun Inman). Um das Problem im IE 7 zu beheben, müssen 3 Zeilen Quelltext nach Zeile 55 der si.files.js hinzugefügt werden.

51
52
53
54
55
56
57
58
59
60
61
62

var x = e.pageX - ox;
var y = e.pageY - oy;
var w = this.file.offsetWidth;
var h = this.file.offsetHeight;
 
// Fix for IE7+, otherwise the control can get dragged outside despite overflow: hidden;
if (x < 0 || y < 0 || x > this.offsetWidth || y > this.offsetHeight) { 
	x = 0; y = 0; h = 0; w = 30;
}
 
this.file.style.top	= y - (h / 2)  + 'px';
this.file.style.left	= x - (w - 30) + 'px';

Die ausgewählte Datei anzeigen

Aus Gründen der Benutzerfreundlichkeit sollte der Benutzer den Namen der ausgewählten Datei auch sehen können. Das geht ganz einfach: Man erstellt ein Element, in welches bei jeder Veränderung am input-Element der Wert von selbigem kopiert wird. Das kann ein Texteingabefeld sein, oder beispielsweise ein span-Element, ich bevorzuge letzteres, denn da der Dateiname eh nicht manuell geändert werden kann ist ein Texteingabefeld für den Benutzer ziemlich verwirrend.

<div id="d">
<!-- Hier wird das Text-Element mittels JS eingefuegt -->
    <label class="durchsuchen" id="durchsuchen">
        <input type="file" class="datei" id="datei" name="datei">
    </label>
</div>
<script type="text/javascript">
    SI.Files.stylizeAll();
 
    if (SI.Files.able) {
        var anzeige = document.createElement('span');
        anzeige.innerHTML = 'Keine Datei ausgewählt.';
        anzeige.id = 'anzeige';
 
        document.getElementById('d').insertBefore(anzeige, document.getElementById('durchsuchen'));
 
        document.getElementById('datei').onchange = function () {
            var datei = document.getElementById('datei').value;
            document.getElementById('anzeige').innerHTML = datei;
        };
    }
</script>

Das Element wird per Java Script erstellt, da Benutzer ohne JavaScript sonst trotzdem neben dem Dateielement noch “Keine Datei ausgewählt” stehen hätten.