Datei Upload - Frontend
als Präsentation ▻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:
▻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); } }
Kapitel
- Das Web Und Html
- Css
- Css Layout
- Urls
- Formulare
- Javascript Dom
- Jquery
- Kommandozeile
- Git
- Http
- Php Vorbereitung
- Php
- Php Db Lesen
- Session
- Php Db Schreiben
- Php Db Optimierung
- Grafik
- Javascript
- Applied Jquery And Css
- Json
- Xml
- Security
- Injection
- Authentifizierung und Session-Management
- Cross Site Scripting (XSS)
- Unsichere direkte Objektreferenzen
- Sicherheitsrelevante Fehlkonfiguration
- Verlust der Vertraulichkeit sensibler Daten
- Fehlerhafte Autorisierung auf Anwendungsebene
- Cross-Site Request Forgery (CSRF)
- Nutzung von Komponenten mit bekannten Schwachstellen
- Ungeprüfte Um- und Weiterleitungen
- Wordpress
- Apache
- Advanced Javascript
- Qualitaet