AjaxUpload

http://valums.com/ajax-upload/

画面遷移せずにアップロードするJavaScriptライブラリ。MITライセンス

「Ajax」とつくけど、XMLHttpRequestは使ってない。まぁでもUI上は非同期通信だから、広義にはAjaxというのかも。

仕組み

XMLHttpRequestでは非同期のファイルアップロードができない。どうやっても無理らしい。なので、iframeを使う。iframe内でpostして、成功したら親ウィンドウに返答する、というなるほどうまくできてますなぁ。

ファイル選択のボタンを画像やテキストにするところではかなりトリッキーなことをしてる。後述するけど、このせいでjqueryのui-dialogと同時に使えなかった。第一引数のbuttonは実はダミーで、ダミーの上に見えないinput要素を重ねてたのでした。その様子はopacity:100にするとよくわかる。

ファイル選択を画像にする部分と、非同期アップロードの部分はスクリプト的に分離してくれた方が助かったなぁ…。

jquery ui-dialogのmodal(overlay)と同時に使えない

dialogの中にAjaxUploadを入れても、ファイル選択画面がクリックできない！詳しくみてないけど、overlayがクリックとかのEventを全部無効にしてるっぽい。

色々試したところ、トリガー用のinputを別に作成して、ファイル選択したらchangeイベントハンドラでAjaxUploadに移し替えて、submitしたらできた。

  var ajaxUpload = new AjaxUpload(dummy, {...});
  var trigger = $(document.createElement('input'))
    .attr('type', 'file')
    .attr('name', 'hoge');
  trigger.change(function(){
    ajaxUpload._input = this;
    ajaxUpload.submit();
  });

さすがに、input[type=file]のvalueに値をそのまま入れるとセキュリティーエラーがでるんだねー。