AjaxUploadの諸問題と画像プレビュー その2
2011.01.28 Author:
さて、ずいぶんと時間が空いてしまいました。
たとえば掲示板でも何でもよいのですが、画像を投稿したりするシチュエーションがあります。
通常、ファイルをアップロードする場合は、
<input type=="file=" name=="xxxx="...>とするのが一般的ですね。
ま、いかにもレガシーなやり方です。
どうでもいいですが、社用車はレガシィです…
この方法では、フォームでポストしてもらうまでファイルの中身が分かりません。
そこで、Ajax風にフォーム全体をポストするのではなく、ファイルだけをポストしようという試み(その名もAjaxUpload)というものがあります。
テーマは、AjaxUploadとdataスキームを使って高速なアップロード画像プレビューサービスを実現させてみようです。
まず、AjaxUploadの仕組みです。
Ajaxであれば、フォームのデータを非同期で送ってということが可能で、これが一般的にAjaxと呼ばれる処理なのですが、残念ながらmultipartのデータを送ることができません。
そのため、無理矢理iframeを生成し、iframe内に<input file="">を作ってポストさせることで代用させている場合がほとんど(※)です。
※ ほとんどというのは、一部のライブラリは別方法で回避しているものがあるからですが、ここでは一般的なライブラリのお話にとどめます
仕組みが分かったところで、どのように実現させたいかと言えば、
- AjaxUploadを使って、ファイルを非同期でアップロード
- サーバー側で、アップロードファイルを判定
- 画像であれば、サムネイル作成など必要な処理を行う
- Ajax通信の戻りにステータスとdataスキームを含ませる
- ステータスチェックを行い、問題がなければdataスキームをimgタグにあてはめて画像を表示
これだと、通信が1回で簡潔するので、成功すればものすごい高速に画像が表示されるというわけです。
やり方をまとめたところで、実際にやってみると意外にうまくいかないものです。
ファイルのアップロードまでは何ら問題なく行くのですが、戻りの処理が想定とは全く違います。
ということで、次回はこのあたりを説明して完成させましょう！
