Datei hochladen mit Fetch API als Alternative zu Ajax

Gesendet wird ein File-Objekt als Blob mit Requestmethod POST

Anmerkungen

Alle Voraussetzungen für den Upload sind gegeben, das FetchAPI unterstützt die Request-Methode POST und es gibt das FileAPI. Die Datei erhalten wir als File-Object was in der Eigenschaft files des Input-Elements mit dem Attribut type="file" zu finden ist:

    var upspot = document.getElementById('upspot');
    var file = upspot.files[0];

Wobei sich diese DEMO auf die erste Datei in der Liste beschränkt, das Hochladen mehrerer Dateien wird über das Attribut multiple unterstützt. Die komplette Funktion zum Upload einer Datei siehe Code untenstehend:

function upload(){
    throbber(true);
    var upspot = document.getElementById('upspot');
    var file = upspot.files[0];
    fetch('/fetch_upload.html?upload=1',{
        headers: new Headers({'Content-Type': 'application/body+query'}),
        method:  'POST',
        body:    file
    }).then( function(response){
        return response.text();
    }).then( text => { printout(text) });
}

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