web-dev-qa-db-ja.com

XMLHttpRequest POST multipart / form-data

JavaScriptでXMLHttpRequestを使用してPOSTファイルの種類の入力要素を含むフォームにしたいので、ページの更新を避けて便利なXMLを取得できます。

JavaScriptを使用して、ページを更新せずにフォームを送信して、フォームのターゲット属性をMSIEのiframeまたはMozillaのオブジェクトに設定できますが、これには2つの問題があります。マイナーな問題は、ターゲットがW3Cに準拠していないことです（そのため、XHTMLではなくJavaScriptでターゲットを設定しています）。主な問題は、少なくともOS X LeopardのMozillaでは、onloadイベントが発生しないことです。さらに、返されるデータはXMLであり、iframeの場合のようにXHTMLに限定されないため、XMLHttpRequestはよりきれいな応答コードになります。

フォームを送信すると、HTTPは次のよ​​うになります。

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>

XMLHttpRequestオブジェクトのsendメソッドを取得して、上記のHTTPストリームを複製するにはどうすればよいですか？

javascriptajaxxmlhttprequest
20
Robin like the bird

'multipart/form-data'リクエストを自分で作成して（詳細については http://www.faqs.org/rfcs/rfc2388.html で）、次にsendメソッド（つまり、xhr.send（your-multipart-form-data））。同様に、ただし簡単ですが、Firefox 4以降（Chrome 5+およびSafari 5+でも））では、このようなリクエストの作成に役立つ FormData インターフェイスを使用できます。 sendメソッドはテキストコンテンツに適していますが、画像などのバイナリデータを送信する場合は、Firefox 3.0以降で使用されているsendAsBinaryメソッドを使用して送信できます。 XMLHttpRequest経由でファイルを送信する方法の詳細については、 http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html を参照してください。

25
Alex Polo

Javascript内のファイル入力フィールドにアクセスする方法はないため、ajaxファイルのアップロード用のjavascriptのみのソリューションはありません。

iframeを使用 のような回避策があります。

他のオプションは SWFUpload または Google Gears のようなものを使用することです。

5
TonyB

Content-Disposition：フォームデータ、名前

次のようにセミコロンを使用する必要があります。Content-Disposition：form-data;名前

0
Aldekein

Iframe（非表示のもの）がXHTMLを意味し、コンテンツを意味しない理由はわかりません。 iframeを使用する場合は、onreadystatechangeイベントを設定して、「完了」を待つことができます。次に、frame.window.document.innerHTML（誰かが私を修正してください）を使用して文字列の結果を取得できます。

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

あなたが指定したonloadイベントについて混乱しています、それはページまたはiframeにありますか？最初の答えは正解です。 iframeでは、DOMスクリプトを使用してコンテンツが既にあるかどうかを確認し、メソッドを起動します。

onloadイベントをiframeに添付する

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

これを機能させるには、IFrameにPOSTする必要があります。IFrameIDを指定するターゲット属性をフォームに追加するだけです。このようなもの：


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

これはFormDataを使用した最新の方法です（ full doc @MDN ）

脚本：

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();
});

（この基本フォームから）

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

Alex Polo氏の回答に改めて感謝します

0
Romuald Brunet