molily: Fileupload mit JS "weiterleiten"

Beitrag lesen

Hallo,

Mit dem files-Array beim Dateiauswahl-Formularfeld kannst du erst einmal auf die ausgewählte(n) Datei(en) zugreifen. Und zwar in erster Linie auf deren Metadaten (Name, Größe usw.). files[0] liefert dir ein File-Objekt. Das kannst du nicht als POST-Parameter (application/x-www-form-urlencoded) hochladen, wie du es versuchst.

Ein Ansatz ist es, den Datei-Inhalt per JavaScript auszulesen und von Hand einen Multipart-HTTP-Request zusammenzubauen. Der erste Teil geht entweder mit getAsBinary oder mit einem FileReader in Verbindung mit sendAsBinary. Der zweite Teil ist vor allem unangenehme Kleinarbeit.

Ein weiterer Ansatz ist, die Datei mit send(file) binär im POST-Body zu senden. Das ist recht robust, aber serverseitig sehr schwer zu verarbeiten, denn es wird kein klassischer Datei-Upload vorgenommen. $_FILES in PHP bleibt leer.

Schließlich kann man das File-Objekt in ein FormData-Objekt hängen und dieses an send() von XMLHttpRequest geben. Der Browser erzeugt dann automatisch einen korrekten Multipart-Request.

Klingt kompliziert? Ist es auch. Die meisten der genannten Techniken sind veraltetet und gelten nur für bestimmte Browserversionen. Die letztgenannte ist die einfachste und zukunftssichere, aber sie wird erst von ein paar neueren Browserversionen unterstützt.

http://blog.timc.idv.tw/wp-content/uploads/HTML5_AJAX_File_Upload.pdf bietet eine Übersicht, eine Beispielumsetzung für jQuery ist http://timc.idv.tw/html5-file-upload/jquery.html5-fileupload.js. Schließlich gibt es ausgereifte Bibliotheken wie http://www.plupload.com/. Diese macht noch viel mehr. Bilder werden gesondert behandelt, dessen Metadaten werden eingelesen, es sind Vorschaubilder möglich. Dateien werden in Chunks hochgeladen.

Das ist eine Wissenschaft für sich. Mal so gefragt: Warum willst du dir das antun? Das ist momentan nicht einfach browserübergreifend und zuverlässig umsetzbar bzw. halt nur mit Mega-Bibliotheken wie Plupload, die hauptsächlich auf Flash und mehr nebenbei auf HTML5/JavaScript setzen.

Mathias