Firefox 3.6 で、ドラッグ＆ドロップなファイルアップロードをする書き方 
とりあえず動くというだけです。
Yet Another Base64 transcoder が必要です
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
onal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=UTF-8" />
<script type="text/javascript" src="base64.js" charset='utf-8'></script>
<script type="text/javascript" src="ajax.js" charset='utf-8'></script>
</head>
<body id="body" onload='ajax_file_uploader_init();'>
<p>ここにドラッグ＆ドロップ</p>
<p>以下ふつーの HTML の例(必要ないです。こんなものをドラッグ＆ドロップ対応にするという例として)</p>
<form enctype="multipart/form-data" action="upload.rb" method="POST" >
<input type="file" name="file" id="file">
<input type="submit" name="submit" value="送信">
</form>
</body>
</html>
ajax.js
/* Ajax file Upload : firefox HTML5 */
/* https://developer.mozilla.org/en/Using_files_from_web_applications */
var dropbox;
function ajax_file_uploader_init() {
dropbox = document.getElementById("body");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
}
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
}
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var multipart_form_data = "";
var boundary = '-----';
multipart_form_data += '--' + boundary + '\r\n'
multipart_form_data += 'Content-Disposition: form-data; name="file"; filename="' +
Base64.utob(file.name) + '"\r\n' +
'Content-Type: ' + file.type + '\r\n' +
'Content-Transfer-Encoding: binary' + '\r\n' + '\r\n';
multipart_form_data += file.getAsBinary();
multipart_form_data += '\r\n--' + boundary + '--'
var ajax = new XMLHttpRequest();
ajax.open("POST","upload.rb");
ajax.setRequestHeader("Content-type","multipart/form-data; boundary=" + boundary);
ajax.setRequestHeader("Content-length",multipart_form_data.length);
ajax.sendAsBinary(multipart_form_data);
}
}
upload.rb
ふつーの CGI の処理と同じ
このページへのコメント
Some Grotesque {Truth|Fact|Actuality|Facts|Unavoidable truth|Honest truth} Regarding Your Beautiful japan Ideal
www.dietasdeadelgazar.info http://www.dietasdeadelgazar.info/40新品！！-シチズン-アテッサ-ジェットセッター-ワールドタイム-atv533023-クロノグラフ-jp-2471.html