画面遷移なしで画像をアップロードする

Ajaxで(xmlHttpRequestで)画像をアップロードできないので、画面遷移なしで画像をアップロードする方法を調べて見た。


あった。
gmailで添付ファイルが自動でアップロードされるしくみ


親フレームで

<form id="imageUploadForm" action="/upload/image/complete" method="post" enctype="multipart/form-data" target="imageIflame">
<input type="file" name ="file" />
<input type="submit" value="file upload..."/>
</form>
<iframe id="imageIflame" scrolling="auto" frameborder="0" style="width: 100%; height: 100%; position: absolute; top: 0pt; left: -10000px;" src="" name="imageIflame">

としてiframeをターゲットとしてアップロードする。
iframeは見えないところにあるので、表面上は裏側でアップロードされていることになる。


んで、iframe画面側で

<input id="imagePath" type="hidden" value="[画像ファイルへのパス]" />

<script language="javascript" type="text/javascript">
var imagePath = document.getElementById('imagePath');
if(imagePath.value != "") {
	var imageUrl = "/img/tmp/" + imagePath.value;
	var html = '<img src="' + imageUrl + '" />';
	parent.親フレームオブジェクトにhtmlを挿入する処理
}
 
</script>

こんな書き方をする。(エラー処理とか考えてないので適当だけど)
すると、親フレームのテキストエリアとかに画像のパスを(Ajax風に)表示させることができる。


でも情報によるとフレーム間のjavascriptアクセスは同じドメインでもセキュリティソフトによっては検知されてうまく動かないことがあるらしい。
むむ