Ajaxが使えないForm
少し前に、AjaxとFormを使って動的なウェブページを作る方法を書きましたが、実はこれには制限があります。それは、フォームの中にファイルのアップロードがあると使えない、ということ。つまり、form に input type="file"がある場合には使えません。これはローカルファイルの読み出しができないというJavascriptのセキュリティ上の制限が原因です。この場合は、別の方法で実現しなくてはなりません。ここでは、iFrameを利用する方法を説明します。
FormとiFrameの使い方
iFrameはinline frameで、文書内に埋め込みの矩形ブロックを作ることができます。Ajaxではファイルのアップロードができませんので、通常のブラウザ機能としてのフォームの処理でファイルのアップロードを行います。その結果をtarget属性を使って iFrame 内に書くことで実現します。
<iframe name="if_sndfmt_result" id="if_sndfmt_result"
style="display:none" src="waiting.php" frameborder="0" height="240px">
</iframe>
<form action="/cgi-bin/video2mpeg4ifr.cgi" method="post"
enctype="multipart/form-data" target="if_sndfmt_result">
<div style="float:left;margin:0em 1.5em 0.7em 0em">
<label for="up_file" class="b">変換するファイル:</label>
</div>
<div style="float:none;margin:0em 0em 0.7em 0em">
<input type="file" name="upfile" id="up_file" size="40">
</div>
</form>
この場合、WEBサーバ側は、ヘッダも付いた完全なWEBページを返すことになります。従って、ページが切り替わってしまう基本的な構成のページから移行するのでしたら、Ajaxを使ったものよりも簡単です。
しかしながら、文書構造を重視するためにFrame自体が使われなくなってきていますし、そもそもXHTMLなどには仕様がなかったりしますので、将来性のないやり方と言わざるを得ません。要するに、このiFrameを使う実現方法はあまりエレガントではありませんので、今後Javascriptの制限が何らかの形で緩和されていくことでしょう。その意味ではテンタティブな解決方法ということになるかもしれません。