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

0
Posted by www.dietasdeadelgazar.info 2013年09月18日(水) 23:25:59 返信

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

×

この広告は60日間更新がないwikiに表示されております。

Wiki内検索

編集にはIDが必要です