html5で複数ファイルアップロード(SAStruts)その２

HTML5 SAStruts 技術メモ

チュートリアルに存在するファイルアップロードをベースとして機能を拡充していく。

Super Agile Struts - Tutorial

前回の導入編により、画面こそそれっぽくなったけど、 実際にアップロードされるファイルが１件だけという問題が発生した。

今回は問題特定編。 処理の内部を見てみる。

続きを読む

html5で複数ファイルアップロード(SAStruts)その１

HTML5 SAStruts 技術メモ

前回変なテンションでSAStruts環境を構築したけども、 本当にやりたかったことはこれ。

チュートリアルに存在するファイルアップロードをベースとして

Super Agile Struts - Tutorial

機能を拡充していく。

今回は導入編

続きを読む

IFRAMEを使用したAJAX風画像アップローダ（サムネイル表示付）

base64 IFRAME 技術メモ

【よく分かる本記事執筆に至る背景】

１、もともとFileApiを利用してAjaxで画像をアップロードする仕組みが実装されていた。

２、暫定的にIE9はsubmitでのアップロードとして処理を切り替える方針でいた。

３、先の工程で、どうしてもIE9もAjax的に画面を切り替えずアップロードする必要が出てきた。(FileApiが使えるのはIE10から)

４、「IE死ね、IE死ね」とぼやきながら情報を集める羽目になる。

５、同時にFileApi(javascript)で行っていたdataUrlの作成もどうにかする必要が出てきた。

６、「IE死ね、IE死ね」とぼやきながら（ry

【やりたくないけどやるべき事】

１、ファイルをサーバへ送る（画面遷移なし）

２、送信完了後にサムネイルに送信した画像を表示する。

【最終的にやった事まとめ】

１、画面に非表示のIFRAMEを埋め込む。

２、ターゲットを非表示のIFRAMEにして、ファイルアップデート処理をsubmitで行う。

３、サーバ(java)側でファイルをbase64エンコードして、dataUrlとしてクライアントに返却する。

４、レスポンスのContents-typeがapplication/jsonだとIEがjson電文をダウンロードしようとするので、text/htmlに変更する。

５、サーバ側レスポンスのdataUrlからサムネイルを表示する。

続きを読む