HTML5FileUpload

HTML5FileUpload besteht aus einer JavaScript-Datei, einer PHP-Datei und einer CSS-Datei, mit deren Hilfe man Dateien an einen Webserver übertragen kann.
Die hoch zu ladenden Dateien werden einfach per Drag & Drop in einen DIV-Container gezogen.
Anschließend wird eine Liste der Dateien erzeugt.

Sind Dateien markiert, deren MIME-Type nicht erlaubt ist, werden diese nicht in die Liste übernommen.

Wenn Bilder unter den hoch zu ladenden Dateien sind, wird ein Vorschaubild angezeigt, solange die Dateigrößte 4 MB (Standard) nicht überschreitet. Die Größenbegrenzung habe ich eingebaut, um einen Browserabsturz bei sehr großen Bildern zu vermeiden.

Vor dem Upload kann man Dateien, die man doch nicht hochladen möchte, wieder aus der Liste löschen.
Anschließend auf "Upload" klicken und abwarten.

Es wird für jede Datei der Fortschritt der Übertragung angezeigt.

Ist eine Datei größer als 4 MB, wird diese in Teilen übertragen und auf dem Server wieder zusammen gefügt.

Sollte man während der Übertragung einer Datei bemerken, dass diese doch nicht hochgeladen werden soll, kann man die Übertragung der Datei abbrechen.
Alle bis dahin übertragenen Daten dieser Datei werden auf dem Server gelöscht.

Möchte man alle noch ausstehenden Uploads abbrechen, klickt man auf "alle abbrechen".

Wenn weitere Dateien hochgeladen werden sollen, einfach auf "Zurücksetzen" klicken und alles ist wieder wie beim Start.

In der PHP-Datei, kann die maximale Teilgröße von 4 MB angepasst werden.
Sollte die Serverkonfiguration weniger als 4 MB pro Upload erlauben, wird der Wert aus der Serverkonfiguration genommen.
Den Pfad, in dem die übertragenen Dateien abgelegt werden sollen, kann man auch in der PHP-Datei anpassen.

Alle weiteren Anpassungen findet man in der JavaScript-Datei.

Das Einbinden in eine Webseite ist auch für ungeübte relativ einfach.
Man sollte allerdings ein paar Grundkenntnisse in JavaScript und HTML haben.
Ein Beispiel liegt dem Download bei.

HTML5FileUpload kann gerne in anderen Projekten verwendet und angepasst werden.
Ein Link auf meine Homepage wäre natürlich nett...

Zusammenfassung:

• Nutzt die Möglichkeiten von HTML5.
• Man kann angeben, welche MIME-Types für den Upload erlaubt sind.
• Anpassen des Speicherortes auf dem Server.
• Angabe der maximal auf einmal zu übertragenden Größe. (Standard 4 MB)
• Leicht und schnell in ein Projekt zu integrieren.
• Anzeige des Fortschrittes in einer Progressbar.
• Upload von großen Dateien. (getestet mit Dateien > 100 MB)
• Einfacher und bequemer Upload von vielen Dateien.
• Layout über CSS anpassbar.
• Vorschau von Bildern, die eine gewisse Dateigröße nicht überschreiten. Die Dateigröße kann in der JavaScript-Datei angepasst werden.
• Pfad zur PHP-Datei kann in der html5fileupload.js in Zeile 18 geändert werden.

Getestet mit Chrome 24, Firefox 18 und IE 10.

Sollten Fehler gefunden werden, oder gibt es Anregungen zur Erweiterung, schreibt mir bitte kurz eine Mail.

Wie bindet man HTML5FileUpload in eine Webseite ein?

Im Head-Bereich des HTML-Dokuments die JavaScript-Datei und die CSS-Datei in die Seite einbinden.

Zum prüfen, ob der Upload möglich ist, und zum erzeugen der Steuerelemente reichen zwei Zeilen JavaScript-Code aus:

// Verweis auf den Container übergeben, in dem die Steuerelemente erzeugt werden sollen.
HTML5FileUpload.setContainer(document.getElementById('Div'));
// Prüft, ob ein HTML5-Fileupload möglich ist, erzeugt alle Steuerelemente und ruft die
// Serverkonfiguration ab.
HTML5FileUpload.init();

ownCloud

Für ownCloud nennt sich das Ganze Large File Upload.

Demo: HTML5FileUpload Demo