XMLHttpRequest Level 2 und neue Möglichkeiten für File-Upload via Ajax

Insbesondere ermöglicht die FileAPI einen einfachen Umgang mit Binärsequenzen und MultiMedia-Dateien

File API -- Die Schnittstelle zum Dateisystem

Die FileAPI ist so beschaffen, dass sofort nach der Auswahl lokaler Dateien, z.B. über einen oder Drag+Drop, gleich auf diese zugegriffen werden kann.

Upload -- Der Request

Die Dateischnittstelle ermöglicht den Zugriff auf lokale Dateien über ein herkömmliches Inptut-Element type="file", wobei mit mit dem Attribut multiple auch eine Mehrfachauswahl unterstützt wird. Zusammen mit der FileAPI kam das neue JavaScript-Objekt FormData womit Uploads auf der Serverseite auch mit Legacy-CODE funktionieren und kompatibel sind.

Neben der Verwendung von FormData ergeben sich jedoch noch ganz andere Möglichkeiten, was Uploads betrifft. So können eigene Serializer zum Einsatz kommen, die ebenfalls binary safe sind und die Erstellung ganzer Multimedia-Dateien erlauben. Also Dateien mit Video, Audio, Grafik und Text zusammen in einem Upload-Stream.

Uploads mittels PUT sind möglich, was heißt dass der gesendete Message-Body serverseitig nicht mehr geparst werden muss -- Ein PUT-Request == Eine Datei. Im gleichen Request erforderliche Meta-Daten werden ganz einfach als QUERY_STRING an den URL angehängt oder in einem Custom-Header übertragen.

Download -- Die Response

Serverseitige Prozesse, bspw. mit Perl oder PHP realisiert, schicken Binaries zunächst nach STDOUT wonach dieser Datenstrom vom Webserver übernommen und samt Response-Header in Richtung Browser gesendet wird. JavaScript unterzieht die gesendeten Binaries einem Type-Cast, je nachdem, welcher Response-Type angefordert wurde:

    xhr.responseType = 'arraybuffer';
    xhr.responseType = 'blob';

ergibt sich dann im Browser die weitere Verarbeitung. Als Blob aufgefasst, kann z.B. die xhr.response unmittelbar in einen URL verwandelt werden var url = URL.createObjectURL(xhr.response); um mit diesem url das src-Attribut eines HTML-Objekts direkt zu bestücken img.src = url; Mit window.URL.revokeObjectURL(url); wird dem Browser signalisiert, dass dieser URL nicht mehr gebraucht wird.

Custom-Response-Header können zusätzliche Informationen zu einem als Response gesendeten Blob oder ArrayBuffer beinhalten oder es wird gleich eine Multimedia-Datei gesendet die mit JavaScript deserialisiert wird.


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