AJaxで画像をアップロードする方法はすでに有名ですが、検索でヒットしづらかったのでメモをば。
ずばり、「見えないインラインフレームにPOSTする」です。
はい、AJaxではありませんね（笑）
[hoge.html]
<form action="uploadImage.php" method="post" name="hoge" enctype="multipart/form-data" target="targetFrame">
<input type="file" name="image" id="image" />
<input type="submit" value="アップロード" />
</form>
<!-- POST先のインラインフレーム -->
<iframe name="targetFrame" style="display: none;"></iframe>
問題は「アップロードした画像をどうやって非同期に表示させるか」ですよね。
これを実現するには、hoge.htmlでアップロード完了のタイミングを受け取る必要があります。
自分は、上記の例でいうところのuploadImage.phpのさいごに下記のJavaScriptを追加することで実現しました。
[uploadImage.php]
<?php
//画像のアップロード処理
?>
<!-- 親のフレームにある描画関数をたたく！ -->
<script language="JavaScript" type="text/javascript">
window.parent.viewImage();
</script>
これならアップロードが終わったときに再描画してくれるので、アップロード→再描画の流れが完成します。
ちなみに、AJaxで画像のアップロードをする方法もあるらしいですよ。
PR