こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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=

投稿日時 - 2008-02-06 21:34:32

QNo.3751185

暇なときに回答ください

質問者が選んだベストアンサー

ver.1.5.1を見たところ、そのままではmultipart/form-dataを送信することはできません。
contentTypeにmultipart/form-dataを指定し、
あらかじめboundaryや各データヘッダを自分で作成し、1つの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を送信することが目的なら、
それに対応したライブラリを探すとか(私も公開してますので、最低1つはあるはずです(^^; あ、Content-Lengthはつけてないや)
Form.serializeのかわりにmultipart/form-dataに整形する関数を自分で作るとかしてみてはいかがでしょうか。

投稿日時 - 2008-02-07 04:21:42

お礼

ご回答、ご解説、ありがとうございました。
$('output').innerHTML='<iframe name="if" id="if style="display:none"></iframe>');

の方法で試してみます。

投稿日時 - 2008-02-07 08:26:16

ANo.2

このQ&Aは役に立ちましたか?

6人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

セキュリティ的に難しいんじゃないでしょうか。
単純にやったら出来ないと思います。

調べてみたところ、いくつか手法はあるようですが、IFRAMEが難しいようだと厳しいかも知れませんね。
ADODBとかでも出来るようですが、マルチブラウザにはならないと思います。

スマートにやるならFlashでやった方が良いのではないでしょうか。
フリーでも結構落ちてますし、複数のファイルをアップロードし易いですよ。

投稿日時 - 2008-02-07 01:56:59

お礼

ご回答ありがとうございます。

Flashの部品、探してみます。

投稿日時 - 2008-02-07 08:23:14

あなたにオススメの質問