メモ1

ファイルをAjaxを用いてバックグラウンドで送信する方法。prototype.js使用。

html

<input type="file" name="file" id="file">

javascriptのonclickなりなんなりのイベントで

var frame = document.createElement('iframe'); // ダミーのiframeを作成
var bodyobj = document.getElementsByTagName('body')[0]; // bodyを取得
var file = $('file');

// フレームが見えないようにする。
Element.hide(frame);
// フレームをbodyに追加しておく
bodyObj.appendChild(FileSubmittion.frame);
// フレームのID/nameを設定(bodyに追加した後で無いと、IDは割り振れない？ @IE7にて)
frame.contentWindow.name =
frame.id = frame.name = “file_submittion_dammy_frame”;

// ダミーフォームを作る
form.action = “hogehoge.php”; // 送信先のCGIなりPHPなりを設定。
form.target = “file_submittion_dammy_frame”; // ダミーフレームに飛ぶように設定。
form.method = “post”;
form.encoding = “multipart/form-data”;
Element.hide(form); // フォームは見えない様に。
bodyObj.appendChild(form);

// ファイル用のinput[type="file"]をダミーのフォームに移動する。
// 元の位置に戻せるように、元の位置にはダミーのdiv要素をつっこんでおく。
var prevObj = file.parentNode.insertBefore(document.createElement(‘div’), file);
// appendChildすると、そこにコピーではなく移動される。
form.appendChild(file);
// 送・信！
form.submit();

/*
ファイルの送信が終わったら、イベントで通知できる。通知し終わったら、Event.stopObservingしないと余計なときまでイベントが発生するかも。（リロードかかったり）
*/
Event.observe(frame, ‘load’, file_submit, false);

// ファイル用のフォームを元に戻す。divと置き換え。
prevObj.parentNode.replaceChild(file, prevObj);

メモ2

イベントに適当な引数渡せないじゃん！⇒

Event.observe(element,
'click',
new Function('function_01(' arg1 + ',' + arg2 + ',' + ... + ')'),
false);

という風に出来るはず。