FileUpload mit PHP und AJAX

Dateien hochladen mit dem PHP Framework

Über diese Anwendung

Was Sie hier sehen ist eine kleine Demo zu meinem PHP/Perl-Framework. Das Template der hier vorliegenden Seite ist kompatibel zu PHP's htmltemplate.php und Perl's HTML::Template. Das heißt, daß diese Anwendung sowohl mit Perl als auch mit PHP funktioniert. Und selbstverständlich funktioniert damit das Hochladen von Dateien sowohl mit als auch ohne JavaScript, ist mit Letzterem jedoch komfortabler. Hinweis Datenschutz: Uploads werden hier nicht gespeichert.

Upload per Native Submit

Sofern JavaScript im Browser deaktiviert ist, funktioniert das Upload wie gehabt über die Attribute method="POST" und Enctype="multipart/form-data" im Form-Element. Eine Fortschrittanzeige ist damit natürlich nicht möglich, aber Serverseitig sind alle angehängten Dateien zur weiteren Verwendung verfügbar. Untenstehender Code zeigt, wie die Datenstruktur so umgebaut werden kann, damit das HTML-Template dementsprechend gerendert wird. Da das Attribut multiple gesetzt ist, kann das Upload also mehrere Dateien beinhalten und damit ein Array entstehen kann, ist der Name für das Uploadfeld mit eckigen Klammern like upspot[] zu notieren. Zum Zugriff in das $_FILE-Array ist der Name des Uploadfeldes jedoch ohne die Klammern zu verwenden.

foreach($_FILES['upspot']['name'] as $i => $value){
    $hunt = array(
        'name'     => $value,
        'type'     => $_FILES['upspot']['type'][$i],
        'size'     => $_FILES['upspot']['size'][$i],
        'error'    => $_FILES['upspot']['error'][$i],
        'tmp_name' => $_FILES['upspot']['tmp_name'][$i]
    );
    if( $error = $hunt['error']  ){
        break;
    }
    array_push($files, $hunt);
}

Bei dieser Art des Upload wird eine komplett neue Seite über das HTML-Template an den Browser ausgeliefert.

Upload per Ajax

Mit verfügbaren JavaScript wird die Progressbar sichtbar gemacht. Mit dieser Fortschrittanzeige und die aufgrund der Tatsache, daß beim Upload die Seite nicht neu ausgeliefert wird, ergibt sich ein höherer Komfort für den Uploadprozess. Die Darstellung der Ergebnistabelle erfolgt in diesem Fall jedoch nicht über das HTML-Template sondern durch ein im Quelltext eingebautes Template für JavaScript. Vor dem Upload, also bereits beim Einfügen der Dateianlagen, wird diese Liste ebenfalls über ein JavaScript-Template im Browsr ausgegeben.

File API Local

Beim Einfügen der Dateien entsteht über dem Eingabefeld eine FileList. Das Template wird ganz einfach mit dieser Liste gerendert, das Ergebnis ist eine Tabelle.

// FileAPI, FileList
var files = document.getElementById('upspot').files;
var tt = $('#tf').html();
$('#tfout').html(xr(tt, {'files': files}));

JavaScript FormData

Über dem Fomular wird ein FormData-Objekt erstellt und mit XHR per POST gesendet, das ist alles.

var xhr = new XMLHttpRequest();
var fd = new FormData(document.forms[0]);
fd.append('upload','1');
xhr.open('POST','/upload.phtml');
xhr.send(fd);

Datenschutzerklärung: Diese Seite dient rein privaten Zwecken. Auf den für diese Domäne installierten Seiten werden grundsätzlich keine personenbezogenen Daten erhoben. Das Loggen der Zugriffe mit Ihrer Remote Adresse erfolgt beim Provider soweit das technisch erforderlich ist. sos@rolfrost.de.