- ベストアンサー
Ajax.Updaterでmultipart/form-dataの送信方法
<html> <body> <form action="/hoge.cgi" method="POST" enctype="multipart/form-data" target="if"> arg1:<input type="textbox" name="arg1"/><br/> <input type="file" name="data" size="60"> <input type="submit" value="Upload" onclick="post()"/> </form> <iframe name="if" id="if" frameborder="0" border="0" width="730" height="500" scrolling="yes"></iframe> </body> </html> 上記と同じような事をiframeを使わないで実現したいです。 以下の様に書いてみました。 <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function post(){ var url ='/hoge.cgi'; new Ajax.Updater( $('result'), url, { method: 'POST', parameters: Form.serialize($("form1")), contentType: 'multipart/form-data' } ); } </script> </head> <body> <form id="form1" enctype="multipart/form-data"> arg1:<input type="textbox" name="arg1"/><br/> <input type="file" name="data" size="60"> <input type="button" value="Upload" onclick="post()"/> </form> <div id="result"></div> </body> しかし、/hoge.cgiには前者と同じようなhttpリクエストがわたりません。前者と同じような（下記(1)参照）httpリクエストを発行するにはどうしたらよいでしょうか？ (1)前者：httpリクエストの例 POST /hoge.cgi HTTP/1.1 CONTENT_LENGTH: 285 CONTENT_TYPE: multipart/form-data; boundary=---------------------------7d8ea171f055c ～中略～ -----------------------------7d8ea171f055c Content-Disposition: form-data; name="arg1" -----------------------------7d8ea171f055c Content-Disposition: form-data; name="data"; filename="" Content-Type: application/octet-stream -----------------------------7d8ea171f055c-- (2)後者：httpリクエストの例 POST /hoge.cgi HTTP/1.1 CONTENT_LENGTH: 11 CONTENT_TYPE: multipart/form-data; charset=UTF-8 ～中略～ arg1=&data=
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- JavaScript
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ver.1.5.1を見たところ、そのままではmultipart/form-dataを送信することはできません。 contentTypeにmultipart/form-dataを指定し、 あらかじめboundaryや各データヘッダを自分で作成し、１つのStringデータにして（自分で送信準備を全て行い）、関数を呼び出さなければならないようです。 ところで、 単純にmultipart/form-dataを送信することが目的ですか？ それとも、ファイルを送信することが目的ですか？ ファイルを送信することが目的なら、JavaScriptのセキュリティー制限により、不可能です。 <input type="file">のデータは、ファイル名しか取得することが出来ません。（valueはreadOnlyです） また、XMLHttpRequestで扱えるデータはDOM-Stringですので、バイナリデータは扱えません。 おそらく￥0が出てきた時点でデータの送受信が途切れると思います。 ActiveXObjectのMSXML2.XMLHTTPではバイナリデータの”受信”は可能です。 HTMLファイルに<iframe>を書きたくないのなら、 フォームの送信前に$('output').innerHTML='<iframe name="if" id="if style="display:none"></iframe>'); のように、動的にインラインフレームを作ることで対応出来ると思います。 createElementを使うときは、IEのみ document.createElement('<iframe name="if">')としてください。 単にmultipart/form-dataを送信することが目的なら、 それに対応したライブラリを探すとか（私も公開してますので、最低１つはあるはずです(^^; あ、Content-Lengthはつけてないや） Form.serializeのかわりにmultipart/form-dataに整形する関数を自分で作るとかしてみてはいかがでしょうか。
その他の回答 (1)
- みずの（@mizuno3）
- ベストアンサー率73% (192/263)
セキュリティ的に難しいんじゃないでしょうか。 単純にやったら出来ないと思います。 調べてみたところ、いくつか手法はあるようですが、IFRAMEが難しいようだと厳しいかも知れませんね。 ADODBとかでも出来るようですが、マルチブラウザにはならないと思います。 スマートにやるならFlashでやった方が良いのではないでしょうか。 フリーでも結構落ちてますし、複数のファイルをアップロードし易いですよ。
お礼
ご回答ありがとうございます。 Flashの部品、探してみます。
お礼
ご回答、ご解説、ありがとうございました。 $('output').innerHTML='<iframe name="if" id="if style="display:none"></iframe>'); の方法で試してみます。