ajaxFileUploadと戯れる

ajaxFileUpload

jQueryﾌﾟﾗｸﾞｲﾝのajaxfileuploadを使ってみた。
画面遷移を行うことなくファイルをアップロードできるという優れもの。
ファイルサイズが軽いので中身をのぞいてみたらｺﾝﾅ仕組み。

  1. アップロード用Formを生成し、アップロードするファイル要素をアップロード用Formにコピーする。
  2. このときコピーするファイルのIDはDate().getTime()により生成し、一意なIDを割り当てる。
  3. アップロード用Formの表示位置を top:-1200px , left:-1200px , position:absolute で見えないよう設定し、body要素に追加する。
  4. 画面遷移用Iframeを生成し、表示位置を top:-1000px , left:-1000px で見えないよう設定し、body要素に追加する。
  5. Formのtarget属性に画面遷移用Iframeを設定することでメイン画面ではなくIframeを画面遷移させて回避をしてるっぽい。
  6. アップロード成功時のコールバック関数が存在する場合、レスポンスのデータとステータスを引数として実行する。
  7. アップロード失敗時のコールバック関数が存在する場合、レスポンスのデータとステータスとエラーオブジェクトを引数として実行する。

ﾌﾑﾌﾑ。ﾊｯｸ感がﾌﾟﾝﾌﾟﾝしますね。
このままでも使えるけど、フォームに他の値を追加ｼﾀｰｲ。ってことで改造。

  1. ajaxFileUploadをﾁｭｲｰﾝする。



//Before この行を

var form = jQuery.createUploadForm(id, s.fileElementId);
//After このように

var form = jQuery.createUploadForm(id, s.fileElementId,s.params);

  1. createUploadFormをﾁｭｲｰﾝする。



//引数を

    createUploadForm: function(id, fileElementId)
//ﾌﾔｰｽ

    createUploadForm: function(id, fileElementId,params)


//この行の下に

$(oldElement).appendTo(form); 
//以下を追加

for(var param in params) {

    var e = $('<input type="hidden" name="'+param+'" value="'+params[param]+'" />');

    $(e).appendTo(form);

}

  1. ajaxfileuploadを呼び出す引数にparamsオブジェクトを追加する

ｺﾝﾅｶﾝｼﾞ



$.ajaxFileUpload({

    url:'./cgi-bin/hogehoge.cgi',

    secureuri:false,

    fileElementId:"fileA",

    dataType: 'json',

    params : {

        id : "hogehoge",

        name : "fugafuga"

    },

    error: function (data, status, e){

        alert(e);

    },

    success : function(data, status){

        alert("ﾌｯﾌｰｲ");

    }

})