XMLHttpRequest POST multipart / form-data

Question

Ich möchte in JavaScript XMLHttpRequest verwenden, um eine Form POST, die eine Eingabeelement Dateityp enthält, so dass ich Seitenaktualisierung vermeiden kann und nützliche XML zurück.

kann ich die Form ohne Aktualisierung der Seite einreichen, mit JavaScript das Zielattribut auf dem Formular zu einem Iframe für MSIE oder ein Objekt für Mozilla zu setzen, aber dies hat zwei Probleme. Das kleine Problem ist, dass Ziel nicht W3C-konform ist (weshalb ich es in JavaScript festgelegt, nicht in XHTML). Das Hauptproblem ist, dass das Onload-Ereignis nicht ausgelöst, zumindest nicht auf Mozilla auf OS X Leopard. Außerdem XMLHttpRequest würde für schöneren Antwortcode machen, weil die zurückgegebenen Daten XML sein könnten, nicht auf XHTML beschränkt wie es den Fall mit iframe ist.

Absenden des Formulars Ergebnisse in HTTP, die wie folgt aussieht:

Content-Type: multipart/form-data;boundary=<boundary string>
Content-Length: <length>
--<boundary string>
Content-Disposition: form-data, name="<input element name>"

<input element value>
--<boundary string>
Content-Disposition: form-data, name=<input element name>"; filename="<input element value>"
Content-Type: application/octet-stream

<element body>

Wie erhalte ich die Sendemethode das XMLHttpRequest-Objekt der obigen HTTP-Stream zu duplizieren?

Answer 1

Sie können die ‚multipart / form-data‘ Anfrage konstruieren selbst (lesen Sie mehr darüber unter http : //www.faqs.org/rfcs/rfc2388.html ) und dann die send Methode) (dh xhr.send (Ihr-mehrt-form-data.). In ähnlicher Weise aber einfacher, in Firefox 4+ (auch in Chrome 5+ und Safari 5+) können Sie das Formdata Schnittstelle, die solche Anforderungen zu konstruieren hilft. Die send Methode ist gut für Textinhalt, aber wenn Sie binäre Daten wie Bilder senden möchten, können Sie es mit Hilfe der sendAsBinary Methode tun, die mit Firefox um Start-3.0 wurden. Einzelheiten dazu, wie Dateien über XMLHttpRequest zu senden, finden Sie auf http: //blog.igstan.ro/2009/01/pure-javascript-file-upload.html .

Answer 2

Es gibt keine Möglichkeit, ein Datei Eingabefeld innerhalb Javascript zugreifen, so gibt es keinen Javascript ist einzige Lösung für Ajax-Datei-Uploads.

Es gibt Abhilfe wie ein iframe verwenden.

Die andere Möglichkeit wäre, etwas zu verwenden, wie SWFUpload oder Google Gears

Answer 3

Ich sehe nicht, warum iframe (ein unsichtbarer) XHTML bedeutet und keinen Inhalt. Wenn Sie einen iframe verwenden, können Sie die onreadystatechange Ereignis eingestellt und warten auf ‚vollständig‘. Weiter Sie frame.window.document.innerHTML verwenden könnten (bitte mich jemand korrigieren) das Zeichenfolge Ergebnis zu erhalten.

var lFrame = document.getElementById('myframe');
lFrame.onreadystatechange = function()
{
   if (lFrame.readyState == 'complete')
   {
      // your frame is done, get the content...
   }
};

Answer 4

Sie müssen einen IFrame POST diese Arbeit zu bekommen, einfach ein Zielattribut zu Ihrem Formular hinzufügen, in dem Sie die IFrame-ID angeben. So etwas wie folgt aus:

<form method="post" target="myiframe" action="handler.php">
...
</form>
<iframe id="myiframe" style="display:none" />

Answer 5

ich bin verwirren über das Onload-Ereignis, die Sie angegeben, ist es auf der Seite oder auf iframe ?, die erste Antwort ist keine Art und Weise richtig Theres, dies zu tun rein xmlhttprequest verwenden, wenn das, was Sie acheive wollen, ist eine Methode Auslösung, wenn die Antwort auf iframe existiert, einfach zu überprüfen, ob es Inhalte bereits oder nicht mit DOM Scripting hat, dann die Methode ausgelöst.

onload Ereignis an den iframe anhängen

if(window.attachEvent){
 document.getElementById(iframe).attachEvent('onload', some_method);
}else{
 document.getElementById(iframe).addEventListener('load', some_method, false);
} 

Answer 6

  

Content-Disposition: form-data, name

Sie sollten Semikolon, wie folgt verwenden: Content-Disposition: form-data; Name

Answer 7

Hier ist eine aktuelle Art und Weise unter Verwendung von Formdata ( voll doc @MDN )

Script:

var form = document.querySelector('#myForm');
form.addEventListener("submit", function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", this.action);
    xhr.addEventListener("load", function(e) {
        // Your callback
    });

    xhr.send(new FormData(this));

    e.preventDefault();
});

(von dieser Grundform)

<form id="myForm" action="..." method="POST" enctype="multipart/form-data">
    <input type="file" name="file0">
    <input type="text" name="some-text">
    ...
</form>

Nochmals vielen Dank an Alex Polo für seine Antwort