javascript - XMLHttpRequest POST multipart/form-data

Question

JavaScript で XMLHttpRequest を使用して、ファイルタイプの入力要素を含むフォームを POST し、ページの更新を回避して有用な XML を取得したいと考えています。

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

フォームを送信すると、次のような 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>

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

score 26 · Accepted Answer

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

score 5 · Accepted Answer

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

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

もう1つのオプションは、 SWFUploadやGoogleGearsなどを使用することです。

score 0 · Accepted Answer

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...
   }
};

score 0 · Accepted Answer

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


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

score 0 · Accepted Answer

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

onload イベントを iframe にアタッチする

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

score 0 · Accepted Answer

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

次のようにセミコロンを使用する必要があります。名前

javascript - XMLHttpRequest POST multipart/form-data

7 に答える 7

Related

Reference