忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


2017/10/22 13:24 |
AJaxで画像をアップロード

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

2008/04/27 01:38 | Comments(0) | TrackBack(0) | AJax

トラックバック

トラックバックURL:

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<IEでJavaScriptの高速化 | HOME |
忍者ブログ[PR]