<form id="uploadForm" action="アップロード用アクションパス" method="post" enctype="multipart/form-data" target="dummyFrame">
  <div id="thumbnail">
  <input type="file" name="imageFile" />
</form>
<iframe name="dummyFrame" style="display:none;"></iframe>

target="dummyFrame"がミソ。 style="display:none;"に関してはsafariで正常に動かないようなので注意が必要の様子。でも今回はsafariは関係ないのでこのまま進める。

// ファイル選択時に実行するfunction
$("#imageFile").change(function() {

  // 申し訳程度の拡張子チェック
  var uploadFileName = $("#imageFile").prop('files')[0].name;
  if (!/\.jpe?g$/.test(uploadFileName) &amp;&amp; !/\.JPE?G$/.test(uploadFileName)) {
    alert("その拡張子はだめよ。");
    return false;
  }
  
  $('form[name="uploadForm"]').submit();
  return false;
}

// IFRAME制御
$('form[name="uploadForm"]').submit(function(){
  // submitされた時点で、loadイベントをbind
  $('iframe[name="dummyFrame"]').unbind().bind('load', function() {
    var response = $('iframe[name="dummyFrame"]').contents();
    // サムネイル表示用のfunctionを呼び出す。
    fileLoad(response);
  });
});

function fileLoad(response) {
  // レスポンスをjson電文としてパースする。
  var json = $.parseJSON(response[0].body.innerHTML);
  // エラー時はエラーメッセージをアラート表示
  if (json.errorFlg === true) {
    alert(json.errorMessage);
  } else {
    document.getElementById("thumbnail").innerHTML = "<img src="&quot; + json.dataUrl + &quot;" alt="" />";
  }
}

上から順に処理が実行されるイメージ。 uploadFormをsubmitするけれども、targetはdummyFrameのため、メインの画面は変わらない。そしてdummyFrameは非表示なので、見た目上は何も起こっていないように見える。けども、ちゃんとsubmitは行われる。

処理結果は非表示のdummyFrameのロードイベントで拾って、親画面のthumbnailにdataUrlからファイルを表示する。

サーバ(java)サイド編

以下の例はSAStruts使ってます。 Base64UtilもSAStrutsのライブラリなので必要に応じて適当に読み替えてください。

@Execute(validator = false)
public String "jspで指定したアクションパスに対応するメソッド"() {

    boolean errorFlg = false;
    String errorMessage = "";

    // ファイルアップロード処理をこの辺に書く
    // ここは今回の話から外れるので割愛。
    // 画面から送られた<input name="imageFile" type="file" />の内容をアップロードしましょう

    // レスポンスデータの構築
    
    // dataUrlの接頭語(今回はjpegなので決め打ち)
    String dataUrl = "data:image/jpeg;base64,";

    // <input name="imageFile" type="file" />の内容のロード
    FormFile file = sampleForm.imageFile;
    int fileLen = (int) file.getFileSize();
    byte[] data = new byte[fileLen];
    InputStream fis = null;
    try {
        fis = file.getInputStream();
        fis.read(data);
        // BASE64エンコードを行い、dataUrlを生成する。
        dataUrl = dataUrl.concat(Base64Util.encode(data));
    } catch (final IOException e) {
        errorFlg = true;
        errorMessage = "エラーだよ：" + e;
    } finally {
        IOUtils.closeQuietly(fis);
    }

    // レスポンスを生成
    Map&lt;String, Object&gt; responseData = new HashMap&lt;String, Object&gt;();
    responseData.put("dataUrl", dataUrl);
    responseData.put("errorFlg", errorFlg);
    responseData.put("errorMessage", errorMessage);

    // データを返却
    ResponseUtil.write(JSON.encode(responseData), "text/html");

    return null;

}

BASE64へのエンコード結果をレスポンスとして返却している点がポイント。その際にレスポンスを"text/html"にしているのはIEでのダウンロード回避のため。

以上の実装で、きっとajax的な画面ができたはず！くっそぅ。。。こんなことする羽目になったのもすべてIEのせいだ！ IEなんて滅びてしまえ！！

ねぎぶログ

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

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

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

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

こちらのサイトを参考にさせていただきました。

クライアントサイド編

サーバ(java)サイド編