Datei Upload - Frontend

vorige Präsentation: Datei Upload | zurück zum Buch-Kapitel [esc] | Nächste Präsentation API verwenden mit PHP

Frontend

Im “Frontend” gab es in den letzten Jahren einige Verbesserungen beim Datei-Upload: in modernen Browsern kann man Dateien mit “Drag-and-Drop” in den Browser befördern, und erst in einem zweiten Schritt hochladen:

Neu im Frontend: Drag and Drop in den Browser

Drag-and-Drop entgegen nehmen

Wählen Sie einen Tag in der Webseite aus, der die Dateien entgegen nehmen soll. (Es könnte auch der ganze Body sein). Für diesen Tag müssen die Events “dragenter”, “dragover” und “drop” behandelt werden:

dropbox.addEventListener("dragenter", ignore_all, false);
dropbox.addEventListener("dragover", ignore_all, false);
dropbox.addEventListener("drop", handle_drop, false);

function ignore_all(e) {
    e.stopPropagation();
    e.preventDefault();
}

function handle_drop(e) {
    e.stopPropagation();
    e.preventDefault();
    handleFiles(e.dataTransfer.files);
}

Thumbnails darstellen

img.src = window.URL.createObjectURL(file);

HTTP Request senden

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.addEventListener("load", handle_load);
xhr.send();

wie mit dem Formular:

var xhr = new XMLHttpRequest();
var fd = new FormData();

xhr.open("POST", "upload.php", true);
xhr.responseType = "document";
xhr.addEventListener("load", handle_load);
fd.append('pic', file);
xhr.send(fd);

Antwort des Servers behandeln

function handle_load(evt) {
    var response_doc = this.responseXML;
    ....
    if( this.status == 200 ) {
        ...
    } else {
        ....
        dropbox.removeChild(img);
    }
}

Datei Upload - Frontend

vorige Präsentation: Datei Upload | zurück zum Buch-Kapitel [esc] | Nächste Präsentation API verwenden mit PHP