ajaxでファイルアップロードをしたいけど、任意のタイミングでアップロードしてほしい。

はてブから転記

ファイル選択した後、すぐにはアップロードを走らせたくない。ワンクッション挟みたい。そんな時の方法。
実はこのソース。今見るとよくわからないことが多い。

・したいこと
　　ボタンが押されたらファイルアップロードを走らせたい。
・解決策
　　addの中に、ボタンが押されたらsubmitするよって書く

fileupload.js

$('#csvupload').fileupload({

  dataType: 'json',
  url: $.hoge.webroot + 'user_account/csv/import',
  // addを実行してからajaxが走る
  add: function(e,data) {
    data.context = $('.button_edit').click(function(){
      data.submit();
    });
　 },

  done: function (e, data) {
    if(data.result.length > 0) {
      var result = true;
      var done_msg = ''; 
      var fail_msg = '';
      for(var fi = 0; fi < data.result.length; fi++) {
        result = result && data.result[fi]['success'];
        if(data.result[fi]['success'] == true) {
          done_msg += "\n" + data.result[fi]['message'];
        } else {
          fail_msg += "\n" + data.result[fi]['message'];
        }
      }
      if(result) {
        alert("アップロード完了" + done_msg);
        location.href = $.seap.webroot + 'user_account/';
      } else {
        alert("一括登録に失敗しました。" + fail_msg.replace('\\n','\n'));
        $('.filename').text('');
      }
      $('.csv_drop_field .label').html('');
    }
  },

  fail: function (e, data) {
    alert("アップロードに失敗しました");
    $('.csv_drop_field .label').html('');
  },

  progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    var progresshtml = "アップロード中 : " + progress + "%";
    $('.csv_drop_field .label').html(progresshtml);
  },
});

よくこんなに書いてたなぁ……しみじみ。