Simuliere die Einreichung von Dateiformularen mit XMLHttpRequest Level 2

Question

Auf meiner aktuellen Seite benutze ich den alten Datei-Upload mit Eingabeelement. Aber jetzt habe ich Drag & Drop von dieser sehr schönen Reihe von Artikeln implementiert: http://www.sitepoint.com/html5-file-drag-and-drop/

Es gibt einen Haken. Vor dem Neuschreiben der Seite übermittelte ich das Formular mit dem Datei- und Serverseitenservice (Javas appspot.com) tat die ganze Magie des Abrufens der Datei und speicherte sie in der Datenbank usw. Ich möchte diesen Dienst trotzdem nutzen. Jetzt, nach dem Umschreiben des Datei-Uploads, um XMLHttpRequest zu verwenden, schreibt mein Code einfach die Datei in den Inhalt, während der Dienst das Formular erwartet.

Gibt es eine Möglichkeit, miltipart/form-data Formular Übermittlung mit XMLHttpRequest nachzuahmen?

Answer 1

Das Objekt FormData kann zum Senden von Formularen multipart/form-data verwendet werden.

Grund Beispiel:

var fd = new FormData(); // Optionally: new FormData(htmlFormElement); 
fd.append('key', 'value'); 
fd.append('file', reference_to_File_object); 
        //^Example: .files property of an <input type="file" 

var xhr = new XMLHttpRequest(); 
xhr.open('post', '/postdata', true); 
xhr.send(fd); 

Wenn Zeichenkette der .send() Methode einer XMLHttpRequest Instanz übergeben werden, ist es umgewandelt in Unicode, dann als UTF-8 codierte. Das bedeutet, dass eine benutzerdefinierte multipart/form-data-Implementierung, die Zeichenfolgen verwendet, oft nicht ordnungsgemäß funktioniert.