Multiple FileUpload via JavaScript -- FileAPI W3C

Hochladen mehrerer Dateien mit Javascript und einem proprietären Enctype bzw. Content-Type

Hinweis: Die hochgeladenen Dateien werden serverseitig nicht gespeichert, auch nicht temporär. Es werden lediglich die Eigenschaften ermittelt und an den Browser zurückgesendet.

File API, Dateiauswahl, lokale Eigenschaften

Nach der Dateiauswahl zeigt untenstehende Tabelle die Eigenschaften der ausgewählten Dateien.

Dateiname Size Type

Erläuterungen

Diese Variante für das Hochladen von Dateien über den Browser nutzt AJAX dessen Instanz, das XHR-Objekt eine proprietären Content-Type: bserialize/eav setzt. Über die File-API/MDN wird aus den im Browser gelinkten Dateien ein Objekt erstellt, wobei der FileReader die Inhalte der Dateien auf einen ArrayBuffer liest. Diese Phase spielt sich bereits während der Auswahl der Dateien ab, die lokalen Eigenschaften der ausgewählten Dateien zeigt eine Tabelle.

Nachdem die Auswahl der lokalen Dateien abgeschlossen ist, wird der Button für das eigentliche Upload sichtbar. Das lokale Objekt mit den Dateiinhalten samt Eigenschaften (name, type, size) wird serialisiert und als eine Bytesequenz zum Server gesendet. Auf dem Server wird die gesendete Datenstruktur wiederhergestellt und die Größen der Binaries werden nun serverseitig ermittelt. Anschließend wird die Datenstruktur wieder serialisiert und an den Browser zurückgeschickt:

sub control{
    my $self = shift;
    my $eav = $self->{CGI}->eav(); # per AJAX gesendete Datenstruktur
    delete $eav->{param};
    my %serverside = ();
    foreach my $ent(keys %$eav){
        $serverside{$ent} = {
            name => $eav->{$ent}{name},
            size => length($eav->{$ent}{bin}),
            type => $eav->{$ent}{type}
        };
    }
    my $bs = bSerialize->new;
    $self->{CONTENT} = $bs->eav2bin(\%serverside);
}

Die in der AJAX-Callbackfunktion erzeugte Tabelle liefert somit dieselben Angaben wie die Tabelle zur lokalen Dateiauswahl.

Content-Type: bserialize/eav

als eine proprietäre aber schlanke Alternative zu multipart/form-data ermöglicht eine wesentlich performantere Übertragung von Binaries und benötigt auch weniger Bandbreite: Eine Datei mit 3.3 MB braucht mit diesem Verfahren 50 Sekunden, dieselbe Datei braucht 70 Sekunden mit dem herkömmlichen Content-Type: multipart/form-data, der Unterschied ist also merklich! Dieser Performancegewinn ergibt sich aus der Tatsache, dass der hier vorgestellte Serialize-Algorithmus weit weniger rechenintensiv ist.


Anbieter: nmq​rstx-18­@yahoo.de, die Seite verwendet funktionsbedingt einen Session-Cookie und ist Bestandteil meines nach modernen Aspekten in Perl entwickelten Frameworks.