/home/antu » HTML

CSS: DIV-Element mit 100% Höhe

Antu — Thu, 22 Oct 2009 06:00:32 +0000

Manchmal ist es gewollt, dass ein HTML-Element (meistens ein DIV) 100% der Höhe des Browser-Fensters einnehmen soll. Mit einem einfachen height:100%; ist es aber nicht getan. Wie man ein DIV-Element erstellt, dass 100% der Höhe des Browser-Fensters hat aber bei längerem Inhalt mitwächst, und was dabei zu beachten ist, erkläre ich in diesem Artikel.

Der Aufbau: HTML

Der HTML-Quelltext hierzu ist einfach, es wird ein DIV-Element erstellt, welches alle weiteren Inhalte umfasst. Dieses bekommt eine Klasse, oder besser eine ID zugewiesen, damit es leichter per CSS gestaltet werden kann.

    <body>
        <div id="wrapper">
            [...]
        </div>
    </body>

HTML und BODY

Damit, dem DIV nun einfach eine Höhe von 100% zuzuweisen, ist es noch nicht getan. Die 100% beziehen sich ja auf die Größe des Eltern-Elements, dem BODY, dieser braucht also auch eine Höhe von 100%. Das HTML-Element bekommt ebenfalls eine Höhe von 100%, schließlich ist es ja das Eltern-Element von BODY.

html, body {
    height:100%
}

Viele Browser geben dem HTML oder dem BODY-Element standardmäßig noch einen kleinen Innenabstand, so dass die Inhalte nicht direkt am Rand kleben. In diesem Fall ist das aber unerwünscht, denn einerseits soll das DIV-Element ja die ganze Höhe ausfüllen (ohne andersfarbige Ränder), und andererseits gäbe es sonst Scrollbalken (100% + 5px Innenabstand oben = mehr als 100% -> Scrollbalken).

html, body {
    margin:0;
    padding:0;
    height:100%
}

DIV-Element auf 100% der Höhe von BODY

Jetzt wo das BODY- und das HTML-Element auf 100% Höhe sind, muss nur noch das DIV-Element auf 100% Höhe gebracht werden:

#wrapper {
    /* Für moderne Browser */
    min-height:100%;
 
    /* Für den Internet Explorer 6 */
    height:auto !important;
    height:100%
}

Das Element soll eine Mindesthöhe von 100% haben, bei längeren Inhalten soll es sich von selbst vergrößern. Eine Mindesthöhe kann mit der CSS-Eigenschaft min-height angegeben werden, würde man hier height verwenden, würden moderne Browser nicht zulassen, dass das DIV-Element mit längeren Inhalten mitwächst, es wäre immer genau 100% hoch. Der Internet Explorer 6 hingegen versteht die height-Eigenschaft als Mindesthöhe, min-height kennt der IE 6 nicht.

Hier kann man sich die Tatsache zu Nutze machen, das der IE 6 !important etwas anders interpretiert als andere Browser. Zuerst legt man fest, dass die Höhe des Elements sich dem Inhalt anpassen soll (auto), und das diese Angabe alle anderen Angaben zur Höhe überschreibt (!important). Dann wird dem Element eine Höhe von 100% zugewiesen, was der IE 6 als Mindesthöhe interpretiert. Da der IE 6 das !important in diesem Fall ignoriert, verwendet er die zweite Angabe, und stellt eine Mindesthöhe von 100% ein. Alle anderen Browser beachten das !important, und ignorieren die zweite height-Angabe.

In Aktion sieht das dann so aus: Beispiel

Eine Fußzeile?

Wie erstellt man jetzt eine Fußzeile? Dazu wird ein DIV-Element mit der ID footer erstellt, dieses wird mit CSS wie folgt gestaltet:

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:2em
 }

Mittels position:absolute; wird festgelegt, dass das Element relativ zum nächsthöheren positionierten Element ausgerichtet wird. Mit bottom:0; bestimmt man, dass das Fußzeilen-Element ganz am unteren Rand vom wrapper-Element positioniert wird.

Nun muss dem wrapper-Element allerdings noch eine relative Positionierung zugewiesen werden, damit das Fußzeilen-Element sich darauf beziehen kann.

#wrapper {
    /* Für moderne Browser */
    min-height:100%;
 
    /* Für den Internet Explorer */
    height:auto !important;
    height:100%;
 
    position:relative
}

Der Inhalt selbst bekommt auch ein eigenes DIV-Element, welches einen Innenabstand so hoch wie die Fußzeile bekommt, so dass die Inhalte nicht unter der Fußzeile angezeigt werden.

    <body>
        <div id="wrapper">
            <div id="content">
                [Inhalte]
            </div>
            <div id="footer">
                [Inhalte der Fußzeile]
            </div>
        </div>
    </body>

Das CSS für das content-DIV sieht so aus:

#content {
    padding-bottom:2em;
}

Fertig sieht das dann so aus: Beispiel.

Formulare: Datei-Element umgestalten

Antu — Sat, 04 Jul 2009 11:23:33 +0000

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.

version="1.0" ?>

    "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.

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.



    
        
    

<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.

Absenden, Zurücksetzen und Verlassen von Formularen

Antu — Mon, 15 Jun 2009 20:48:58 +0000

Manchmal verklickt man sich, oder man überliest in Eile einen Hinweis. Da kann es schon mal passieren, das man ausversehen auf die Zurücksetzen-Schaltfläche anstatt auf die direkt daneben liegende Absenden-Schaltfläche klickt. Oder man schließt versehentlich das falsche Fenster, und alle im Formular eingegebenen Daten müssen noch einmal eingegeben werden. Gerade bei längeren Forenbeiträgen, oder Blog-Artikeln ist das sehr ärgerlich.

Ein paar einfache Java Script-Funktionen schaffen da Abhilfe. Vor dem Absenden oder Zurücksetzen eines Formulars kann der Benutzer noch einmal gefragt werden ob er das wirklich tun will. Auch vor dem Verlassen/Schließen der Seite lässt sich eine solche Abfrage erstellen. Außerdem erkläre ich, wie man eine Schaltfläche erst nach einer bestimmten Zeit aktivieren kann.

Zurücksetzen der Formularfelder

Um dem Benutzer die Möglichkeit zu geben, die Formularfelder wieder auf den Anfangswert zurückzusetzen bzw. sie wieder zu leeren genügt ein input-Element vom Typ reset.

<input type="reset" value="Zurücksetzen" />

Mit Java Script ist es allerdings auch möglich, beim Zurücksetzen des Formulars noch weitere Aktionen auszuführen oder das Zurücksetzen besser zu steuern. So ist es beispielsweise möglich nur bestimmte Felder zurückzusetzen oder den Benutzer zu fragen ob er die Daten wirklich zurücksetzen möchte. Dazu trägt man im onreset-Ereignis des form-Elementes die Funktion ein, die beim Zurücksetzen des Formulars ausgeführt werden soll.

<form action="..." onreset="return wirklichZuruecksetzen();">

Es ist auch möglich die Funktion einen Wert zurückgeben zu lassen, mit dem man steuern kann ob das Formular auch wirklich zurückgesetzt wird. Gibt die aufgerufene Funktion false zurück wird das Formular nicht zurückgesetzt, bei true wird es zurückgesetzt.

function wirklichZuruecksetzen() {
	return confirm('Alle Eingaben loeschen?');
	// Anstatt dessen koennte man hier auch nur bestimmte Felder zuruecksetzen und
	// false zurueckgeben.
}

Abfrage vor dem Absenden

Um eine Abfrage vor dem Absenden zu erstellen, trägt man einfach eine Funktion beim onsubmit-Ereignis des form-Elements ein, auch hier entscheidet wieder der Rückgabewert darüber ob das Formular abgesendet wird.

<form action="..." onsubmit="return confirm('Daten abschicken?');">

Der Vorteil dieser Methode ist, das sie schnell und einfach programmiert ist, der Nachteil das sie nur funktioniert, wenn der Benutzer Java Script aktiviert hat bzw. sein Browser Java Script unterstützt. Bei wichtigen Formularen (beispielsweise einer Bestellung) ist es empfehlenswert, die Daten erst an eine Zwischenseite zu senden, welche noch einmal alle Eingaben auflistet und auf der noch einmal das Absenden bestätigt werden muss.

Im onsubmit-Ereignis lässt sich übrigens nicht nur eine Abfrage einbauen. Man könnte beispielsweise auch überprüfen ob alle Felder (richtig) ausgefüllt sind, und den Benutzer auf eventuelle Fehler hinweisen/auffordern diese zu korrigieren.

Verlassen/Schließen des Formulars: Abfrage bzw. Funktion ausführen

Man kann den Benutzer vor dem Verlassen der aktuellen Seite zu fragen ob er die Seite wirklich verlassen möchte. Dazu kann das onbeforeunload-Ereignis verwendet werden, welches heutzutage von den meisten Browsern unterstützt wird, obwohl es nicht zum Standard gehört.

/* Fragt den Benutzer, ob er die Seite wirklich verlassen moechte.
 */
window.onbeforeunload = function (e) {
	// Hier koennte man noch abfragen ob bereits Eingaben getaetigt wurden,
	// wenn nicht, braucht man in den meisten Faellen wohl auch keine Nachricht
	// anzeigen.
	var nachricht = 'Sie haben das Formular noch nicht abgesendet, möchten Sie das Fenster trotzdem schließen?';
 
	var e = e || window.event;
 
	if (e) {
		e.returnValue = nachricht;
	}
 
	return nachricht;
};
 
window.onload = function() {
	// Keine Meldung ausgeben, wenn der Benutzer die Seite ueber die
	// Absenden-Schaltflaeche verlaesst.
	for (var i = 0; i < document.forms.length; i++)
		document.forms[i].onsubmit = function () { window.onbeforeunload = ''; };
};

Die dem onbeforeunload-Ereignis zugewiesene Funktion sorgt dafür das der Benutzer beim Schließen des Fensters bzw. beim Verlassen der Seite gefragt wird ob er die Seite wirklich schließen möchte. Damit das geschieht, muss die Nachricht, die angezeigt werden soll in das returnValue-Element von dem Ereignis geschrieben, und als Rückgabewert zurückgegeben werden. Bleibt returnValue leer bzw. wird nichts zurückgegeben, erscheint auch keine Nachricht.

Absenden-Schaltfläche erst nach Ablauf einer bestimmten Zeit freigeben

Es ist möglich die Absenden-Schaltfläche erst nach Ablauf einer bestimmten Zeit zu aktivieren, so dass der Benutzer sie vorher nicht anklicken kann. Das ist beispielsweise in einem Forum sinnvoll, wo der Benutzer nur alle 60 Sekunden einen Beitrag schreiben kann. Der Browser des Benutzers stellt die Schaltfläche ausgegraut da, und zeigt auf der Schaltfläche an wie lange es noch dauert bis das Formular abgesendet werden kann. Die Zeit muss selbstverständlich auch serverseitig überprüft werden, diese Funktion ist nur dazu gedacht, es dem Benutzer einfacher zu machen, zu erkennen wann er auf die Absenden-Schaltfläche klicken kann. Durch das Deaktivieren von Java Script kann die Funktion “umgangen” werden, sie stellt also keinen Sicherheitsmechanismus dar!

/* Sorgt dafuer, das eine Schaltflaeche erst nach Ablauf einer bestimmten Zeit
 * klickbar wird, kann aber leicht "umgangen" werden.
 */
function AbsendenENA(sf, zeit) {
	var self = this;
	var intervall = window.setInterval(function() { self.aktualisieren() }, 1000);
	sf.disabled = true;
	var sftext = sf.value;
 
	this.aktualisieren = function() {
		if (zeit > 0) {
			sf.value = sftext + '(' + zeit + ')';
		}
		else {
			sf.value = sftext;
			sf.disabled = false;
			window.clearInterval(intervall);
		}
		zeit--;
	};
 
	this.aktualisieren();
}
 
window.onload = function() {
	// Absenden-Schaltflaeche erst nach einer bestimmten Zeit benutzbar machen
	new AbsendenENA(document.getElementById('abschicken'), 20);
};

Im Beispiel wird eine neue Instanz des AbsendenENA-Objekts erstellt, der erste Parameter ist das Schaltflächen-Objekt (mit der ID abschicken), der zweite die Zeit bis zum Aktivieren, in Sekunden. Die Klasse kann theoretisch an jeder Stelle benutzt werden, im Beispiel wird sie beim onload-Ereignis aufgerufen.

Ich rate dazu, die Funktion nur an Stellen zu verwenden, an denen es dem Benutzer aus technischen (oder auch anderen) Gründen eh nicht möglich wäre das Formular vor Ablauf der Zeit abzuschicken, beispielsweise weil ein Spamschutz das Abschicken serverseitig eh nur alle X Sekunden zulässt. Man kann den Benutzer mit einer solchen Funktion nicht dazu zwingen sich irgendwelche Forenregeln, AGBs, oder sonstwas durchzulesen.

Dateien hochladen in PHP

Antu — Wed, 10 Jun 2009 19:17:27 +0000

Es gibt viele Projekte bei denen man dem Benutzer die Möglichkeit geben möchte selbst Dateien auf den Server hochzuladen, beispielsweise bei Bilderhostern, oder Foren, bei denen der Benutzer die Möglichkeit hat Dateien an einen Beitrag anzuhängen. Sowas lässt sich mit PHP problemlos realisieren.

In diesem Artikel beschreibe ich, wie man ein Formular zum Hochladen von Dateien erstellt und wie man die Dateien serverseitig mit PHP behandelt. Außerdem erkläre ich wie mehrere Dateien auf einmal hochgeladen werden können.

Das Dateiformular

Zuerst einmal wird ein Formular benötigt, in dem der Benutzer eine Datei auswählen kann. Ein input-Element vom Typ file erstellt ein Eingabefeld und eine Durchsuchen-Schaltfläche, mittels derer der Benutzer eine Datei auswählen kann. Das versteckte input-Element mit dem Namen MAX_FILE_SIZE ist ein Hinweis für den Browser des Benutzers, value gibt in Bytes an, wie groß eine hochgeladene Datei maximal sein darf. Die Größe der Datei muss natürlich serverseitig noch einmal überprüft werden, da manche Browser die Angabe evtl. nicht beachten, und weil sie leicht umgangen werden kann. PHP überprüft zwar selbst, ob die Datei größer als MAX_FILE_SIZE ist, aber da diese Angabe leicht manipuliert werden kann, bietet diese Überprüfung keine Sicherheit.

<form action="uploaded.php" enctype="multipart/form-data" method="post">
	<fieldset>
		<legend>Datei hochladen</legend>
		<label for="file">Bitte eine Datei auswählen.</label><br />
		
		<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
		
		<input type="file" id="file" name="beispieldatei" />
		
		<input type="submit" value="Hochladen" />
	</fieldset>
</form>

Die action-Eigenschaft des form-Elements gibt an, an welche Adresse/Datei die Daten übertragen werden sollen. Mit method wird angegeben, wie die Daten übertragen werden sollen, beim POST-Verfahren sendet der Browser eine spezielle POST-Anfrage mit den Daten an den Server. Die Eigenschaft enctype gibt die Kodierung der übertragenen Daten an, hier muss man multipart/form-data verwenden.

Die hochgeladene Datei verarbeiten

Wenn der Benutzer das Formular absendet wird die unter action angegebene Seite aufgerufen, dabei wird die Datei vom Browser an den Server gesendet. Die Datei wird vom Server in einem temporären Verzeichnis gespeichert. Im PHP-Skript muss diese nun verarbeitet und an ihren Bestimmungsort verschoben werden.
PHP sammelt die wichtigsten Informationen über die Datei im autoglobalen Feld $_FILES. Für jede hochgeladene Datei wird ein Element mit dem gleichen Namen wie das input-Element des Formulars (im Beispiel: beispieldatei) in diesem Feld angelegt. Auch dieses Element ist wieder ein Feld, mit folgenden Elementen:

Element	Inhalt
name	Der Name der Datei auf dem Rechner des Benutzers
type	MIME-Typ der Datei, z.B. “image/png”
tmp_name	Der Pfad und Name, unter der die Datei gespeichert wurde (im temporären Verzeichnis), beispielsweise “/tmp/phpKnTtNy”.
error	Der Fehlercode, mittels diesem kann überprüft werden ob beim Hochladen ein Fehler aufgetreten ist.
size	Die Größe der Datei, in Bytes.

Beispiel: So könnte der Inhalt von $_FILES nach dem erfolgreichen hochladen einer Datei aussehen.

Anhand dieser Daten kann die Datei erstmal validiert werden, so können Dateien die zu groß oder zu klein sind, den falschen Dateityp/Endung haben, aussortiert werden. Dateien mit der Endung .php sollten auf jeden Fall aussortiert bzw. wenigstens umbenannt werden, sonst können nämlich PHP-Dateien hochgeladen werden die auch vom PHP-Interpreter ausgeführt werden würden!

Verschieben der Datei

Um die Datei nun weiter zu bearbeiten bzw. sie zu speichern, muss sie vom temporären Verzeichnis in das gewünschte Zielverzeichnis verschoben werden. Nach der Ausführung des Skripts wird die Datei gelöscht, falls sie sich noch im temporären Verzeichnis befindet. Um eine Datei nicht zu speichern, genügt es also, sie einfach nicht aus dem temporären Verzeichnis rauszuholen.

$zielverzeichnis = './hochgeladen/';
 
if ($_FILES['beispieldatei']['error'] != UPLOAD_ERR_OK)
	die('Ein Fehler ist aufgetreten.');
 
if (move_uploaded_file($_FILES['beispieldatei']['tmp_name'], 
                       $zielverzeichnis . basename($_FILES['beispieldatei']['name']))) {
	echo "Datei wurde hochgeladen!";
}
else {
	echo "Ein Fehler ist aufgetreten!";
}

Zuerst wird die error-Variable überprüft, wenn ein Fehler aufgetreten ist, bricht das Skript ab. Anschließend wird die Datei mittels move_uploaded_file($datei, $ziel) in das Zielverzeichnis verschoben. Die Funktion überprüft ob es sich bei der übergebenen Datei um eine hochgeladene Datei handelt, ist das nicht der Fall, wird sie nicht verschoben und es wird false zurückgegeben. Konnte die Datei aus irgendeinem Grund nicht verschoben werden, wird ebenfalls false zurückgegeben, sowie eine Warnung ausgegeben. Die Zieldatei wird überschrieben, wenn sie bereits existiert.

Wozu der basename-Aufruf?

Das Beispielskript speichert die Datei unter dem selben Namen, den sie auch auf dem Rechner des Benutzers hat. Die basename($pfad)-Funktion extrahiert den Dateinamen einer Datei aus einer Pfadangabe.

echo basename("/etc/passwd");
// Ausgabe: passwd

Durch den basename-Aufruf wird sichergestellt, das es sich bei dem Dateinamen wirklich um einen Dateinamen und nicht um einen Pfad handelt. Ohne diese Überprüfung könnten böswillige Benutzer möglicherweise dafür sorgen das ihre Dateien in anderen Verzeichnissen als im Zielverzeichnis landen (Sicherheitslücke!).

Die Datei validieren

Um zu verhindern, das Benutzer Dateien hochladen, die dem Server oder anderen Benutzern schaden könnten , oder aus anderen Gründen unerwünscht sind, empfiehlt es sich eine hochgeladene Datei erst zu überprüfen, bevor sie verschoben wird.

Die Dateigröße. Je nachdem wie die hochgeladenen Dateien verwendet werden, sollte man überprüfen, das der Benutzer keine unsinnig großen (oder kleinen) Dateien hochlädt. Der Speicherplatz auf dem Server ist schließlich begrenzt. Die Variable $_FILES[...]['size'] kann hierzu verwendet werden.
Die Dateiendung bzw. der MIME-Typ. Oft sind nur bestimmte Arten von Dateien erwünscht, beispielsweise Bilder bei einem Bilderhoster. Unpassende Dateitypen können aussortiert werden. Dateien mit der Endung .php bzw. .php3/.php4/.php5/usw. sollten ebenfalls aussortiert werden, bzw. die Dateiendung sollte geändert werden (beispielsweise zu .phps), ansonsten können die Benutzer ausführbare PHP-Dateien hochladen, was in den meisten Fällen unerwünscht sein dürfte (Sicherheitslücke). Hierzu können die Variablen $_FILES[...]['type'] (MIME-Typ) und $_FILES[...]['name'] (Dateiname) verwendet werden. Mit folgender Funktion lässt sich die Dateiendung aus dem Dateinamen ermitteln:
```
function endungErmitteln($dateiname) {
	if (false !== ($punkt = strrpos($dateiname, '.'))) {
		if (strlen($dateiname) > $punkt)
			return substr($dateiname, $punkt + 1);
	}
	// Keine Dateiendung
	return false;
}
```
Es ist noch zu beachten, das es Dateien ohne Endung gibt, und das Dateiendungen in allen möglichen Formen von Groß- und Kleinschreibung vorkommen können (Bsp. Bild.JpEg).
Der Dateiname. Der Name der Datei kann auf nicht erwünschte Zeichen überprüft werden, außerdem könnte man überprüfen ob der Dateiname nicht zu lang ist.
Viren und andere Schädlinge. Ein Benutzer könnte (un-)absichtlich eine Datei hochladen die einen Virus bzw. einen Wurm o.Ä. enthält. Es gibt Erweiterungen für PHP, die es einem ermöglichen eine Datei auf solche Schadprogramme zu überprüfen.
Wie man hochgeladene Dateien automatisch auf Viren überprüft mit php-clamavlib

Mögliche Fehler

Beim Hochladen von Dateien können auch Fehler auftreten, deshalb enthält das $_FILES-Feld im Dateielement auch ein Element namens error, welches angibt ob ein Fehler aufgetreten ist, bzw. um welchen Fehler es sich handelt.

Mögliche Fehlercodes in $_FILES[...]['error']

Mit folgenden Fehlercodes kann der error-Wert verglichen werden, um herauszufinden, was für ein Fehler aufgetreten ist.

Zahl	Fehlercode	Bedeutung
0	UPLOAD_ERR_OK	Kein Fehler, die Datei wurde erfolgreich hochgeladen.
1	UPLOAD_ERR_INI_SIZE	Die Datei ist größer als upload_max_filesize, einer Option in der Konfigurationsdatei von PHP.
2	UPLOAD_ERR_FORM_SIZE	Die Datei ist größer, als im Formular mittels MAX_FILE_SIZE angegeben.
3	UPLOAD_ERR_PARTIAL	Die Datei wurde nur teilweise hochgeladen.
4	UPLOAD_ERR_NO_FILE	Es wurde keine Datei hochgeladen.
6	UPLOAD_ERR_NO_TMP_DIR	Es gibt kein temporäres Verzeichnis, unter dem die Datei abgelegt werden könnte. Erst ab PHP 5.0.3
7	UPLOAD_ERR_CANT_WRITE	Die Datei konnte nicht erstellt werden, bzw. konnte nicht auf das Speichermedium (Festplatte) geschrieben werden. Erst ab PHP 5.1.0
8	UPLOAD_ERR_EXTENSION	Der Hochladevorgang wurde durch eine PHP-Erweiterung gestoppt. Erst ab PHP 5.2.0

Die Überprüfung auf Fehler könnte beispielsweise so aussehen:

$fehlercode = $_FILES['beispieldatei']['error'];
if ($fehlercode != UPLOAD_ERR_OK) {
	echo 'Beim Hochladen ist ein Fehler aufgetreten!
';
	switch($fehlercode) {
		case UPLOAD_ERR_INI_SIZE:
		case UPLOAD_ERR_FORM_SIZE: 
			echo 'Die Datei ist zu groß.'; break;
		case UPLOAD_ERR_PARTIAL:
			echo 'Die Datei wurde nur teilweise hochgeladen.'; break;
		case UPLOAD_ERR_NO_FILE:
			echo 'Es wurde keine Datei hochgeladen.'; break;
		default:
			echo 'Ein interner Fehler ist aufgetreten.';
			echo 'Eine E-Mail wurde an den Administrator geschickt.';
			echo 'Bitte versuchen Sie es zu einem späteren Zeitpunkt nochmal.';
			// E-Mail mit dem Fehlercode an den Admin schicken [...] ;-)
			break;
	}
}

Optionen in der php.ini

Die Option upload_max_filesize gibt an, wie groß die Dateien die hochgeladen werden, zusammen maximal sein dürfen. Es wird also beim Hochladen mehrerer Dateien nicht überprüft wie groß die einzelnen Dateien sind, sondern wie groß sie alle zusammen sind. Die Option post_max_size muss ebenfalls beachtet werden, da die Dateien über das POST-Verfahren hochgeladen werden, limitiert auch diese Option die Gesamtgröße der Dateien die hochgeladen werden. Es empfiehlt sich den Wert dieser Option etwas höher einzustellen, da noch andere Formulardaten übertragen werden.

Außerdem gibt es noch die Option file_uploads, ist diese auf off eingestellt, ist es gar nicht möglich, Dateien hochzuladen.

Zusätzlich muss auch die max_input_time beachtet werden, welche angibt wie lange PHP für das Auswerten von POST/GET/REQUEST-Daten brauchen darf. Da das Hochladen von Dateien durchaus lange dauern kann, beispielsweise wenn die Datei sehr groß ist, oder wenn der Benutzer eine langsame Verbindung hat (ISDN, langsame DSL-Verbindungen).

; Ist das Hochladen von Dateien erlaubt?
file_uploads = On 
; Maximale Gesamtgroesse der Dateien die hochgeladen werden
; K = Kilobyte, M = Megabyte, G = Gigabyte.
upload_max_filesize = 100M 
; Maximale Groesse mittels des POST-Verfahrens uebermittelter Daten
post_max_size = 102M 
; Wie lange darf PHP fuer die Auswertung von uebermittelten Daten brauchen?
max_input_time = 3600 ; 1 Stunde

Wenn die Dateien noch weiter verarbeitet werden, also beispielsweise Vorschaubilder erstellt werden o.Ä. muss eventuell auch noch die max_execution_time beachtet werden. Diese gibt an, wie lange PHP-Skripte rechnen dürfen bzw. wie viel Prozessorzeit sie verbrauchen dürfen bevor sie beendet werden. Die Zeit die für Systemaufrufe, Datenbankabfragen o.Ä. aufgewendet wird, fließt nicht in die Berechnung mit ein, sondern nur die Zeit in der das PHP-Skript selbst ausgeführt wird.

Mehrere Dateien auf einmal hochladen

Es ist auch problemlos möglich, mehrere Dateien auf einmal hochzuladen. Dazu fügt man im Formular einfach weitere input-Elemente vom Typ file hinzu. Eine kleine Besonderheit gibt es allerdings zu beachten: Wenn man den Elementen einfach unterschiedliche Namen gibt, werden für jedes Element auch Elemente im $_FILES-Feld erstellt. Wenn man alle Elemente gleich benennt, muss hinter dem Namen [] stehen, das sieht dann z.B. so aus:

<input type="file" id="file" name="datei[]" />
<input type="file" id="file" name="datei[]" />

In diesem Fall würde PHP nur ein Element im $_FILES-Feld erstellen, die Unterelemente davon (name, size, type, etc.) hätten dann aber mehrere Werte/Elemente.

Elemente ein- und ausblenden

Antu — Tue, 28 Apr 2009 18:27:15 +0000

Wie man HTML-Elemente mittels CSS transparent machen kann habe ich ja bereits in diesem Artikel beschrieben. In diesem Artikel erkläre ich wie man mit JavaScript Elemente ein- und ausblenden kann. Solche Effekte eigenen sich sehr gut zum Beispiel für Bildergalerien, Fehlermeldungen oder dynamisch nachgeladene Inhalte.

Per JavaScript CSS-Eigenschaften verändern

Jedes erlaubte Attribut eines HTML-Elements stellt auch eine DOM-Eigenschaft dieses Elements dar. Der Zugriff auf die CSS-Eigenschaften eines Elements ist also über die Eigenschaft style möglich. Die einzelnen CSS-Eigenschaften sind wiederum Eigenschaften von style.

Ein Beispiel:

// Text im HTML-Element mit der ID beschreibung rot färben
document.getElementById('beschreibung').style.color = 'red';

Dabei muss man beachten das Eigenschaften die einen Bindestrich enthalten etwas anders geschrieben werden. Bei solchen Eigenschaften wird anstelle des Bindestrichs einfach der nächste Buchstabe großgeschrieben.

// text-decoration:line-through;
document.getElementById('beschreibung').style.textDecoration = 'line-through';

Deckkraft mit JavaScript ändern

Um die Deckkraft eines Elements mit JavaScript zu verändern muss man einfach über die style-Eigenschaft den entsprechenden CSS-Eigenschaften neue Werte zuweisen. MozOpacity für Mozilla, KhtmlOpacity für Webkit, filter für den Internet Explorer und opacity für neuere Browser. Folgende Funktion tut genau das. Der erste Parameter ist die ID des HTML-Elements dessen Deckkraft geändert werden soll und der zweite Parameter ist ein Wert von 0 (komplett durchsichtig) bis 100 (voll sichtbar).

function aendereDeckkraft(id, transparenz) {
	var style = document.getElementById(id).style;
	style.filter = "alpha(opacity=" + transparenz + ")";
	transparenz /= 100;
	style.opacity = transparenz;
	style.MozOpacity = transparenz;
	style.KhtmlOpacity = transparenz;
}

Filter erwartet einen Wert von 0-100, die anderen 3 Eigenschaften erwarten einen Wert zwischen 0 und 1. Deswegen wird der Wert der Variable transparenz durch 100 geteilt nachdem filter der neue Wert zugewiesen wurde.

Etwas langsamer

Es sieht natürlich viel besser aus wenn sich die Deckkraft nicht schlagartig ändert sondern langsam von einem Zustand in den anderen übergeht. Dazu verringert bzw. erhöht man einfach in kurzen Zeitabständen immer wieder die Deckkraft bis der gewünschte Wert erreicht ist. Dafür eignet sich die Funktion setTimeout recht gut.

function aendereSichtbarkeit(id, anfang, ende, zeit) {
	var schritte = Math.abs(anfang - ende);
	if (schritte == 0) return;
	var geschwindigkeit = Math.round(zeit / schritte);
	for (var i = 1; i <= schritte; i++) {
		if (anfang > ende) { var neu = anfang - i; }
		else { var neu = anfang + i; }
		setTimeout("aendereDeckkraft('" + id + "', " + neu + ")", (i * geschwindigkeit));
	}
}

Der erste Parameter der Funktion gibt wieder die ID des HTML-Elements an, Parameter 2 und 3 den Start- und Endwert für die Deckkraft und der vierte Parameter legt fest wie lange es dauern soll die Deckkraft zu ändern (in Millisekunden).

Verblassen, Sichtbar machen, Sichtbarkeit wechseln

Um ein Element verblassen zu lassen kann diese Funktion verwendet werden.

function verblassen(id, zeit) {
	var aktuell = aktuelleSichtbarkeit(id);
	aendereSichtbarkeit(id, aktuell, 0, zeit);
}

Die Funktion um ein Element wieder sichtbar zu machen ist ähnlich.

function sichtbarMachen(id, zeit) {
	var aktuell = aktuelleSichtbarkeit(id, 0);
	aendereSichtbarkeit(id, aktuell, 100, zeit);
}

Wenn man die Deckkraft wechseln möchte (nicht voll sichtbare Elemente werden zu 100% sichtbar, sichtbare werden unsichtbar), kann man diese Funktion benutzen:

function wechseln(id, zeit) {
	var aktuell = aktuelleSichtbarkeit(id);
 
	if (aktuell == 100) {
		aendereSichtbarkeit(id, 100, 0, zeit);
	}
	else {
		aendereSichtbarkeit(id, aktuell, 100, zeit);
	}
}

Die aktuelle Deckkraft eines Elements herausfinden

Will man herausfinden welche Deckkraft ein Element hat, kann diese Funktion benutzt werden.

function aktuelleSichtbarkeit(id, vorgabe) {
	var vorgabe = (vorgabe == null) ? 100 : vorgabe;
	var aktuell = parseFloat(document.getElementById(id).style.opacity);
	if (isNaN(aktuell)) { aktuell = vorgabe / 100; }
 
	aktuell = aktuell * 100;
	return aktuell;
}

Die Funktion überprüft allerdings nur die CSS-Eigenschaft opacity, wenn die Deckkraft vorher mit aendereDeckkraft geändert wurde funktioniert das immer, da die Funktion diese Eigenschaft verändert. Es gibt aber noch andere Möglichkeiten Elemente transparent/unsichtbar zu machen (visibility, oder proprietäre Eigenschaften wie -moz-opacity). Man sollte die Funktion also nur benutzen um die Deckkraft von Elementen abzufragen die mit den hier beschriebenen Funktionen geändert wurde. Wenn opacity keinen Wert hat wird, falls angegeben, der Wert des Parameters vorgabe zurückgegeben, ansonsten wird eine Deckkraft von 100% angenommen.

Beispielseite

Ich habe wieder eine Beispielseite eingerichtet auf der man die in diesem Artikel beschriebenen Effekte ausprobieren kann.

Zur Beispielseite