ローカルファイルをドラッグ&ドロップで操作

webを使ってパソコン上にあるローカルファイルをドラッグ&ドロップで操作することができる。 ローカルファイルをパソコン上で処理するために、わざわざwebを使って処理する必要はない。 ローカルファイルの内容をサーバに送ったりしたり、サーバでの処理結果をローカルファイルに保存したりするときに用いる操作に使える。

ソースコード

// ドロップ領域のdiv要素
var dp = null;
// ファイルロード進捗表示領域のdiv要素
var prog = null;
// ファイル情報表示領域のdiv要素
var info = null;
// ファイルの内容表示領域のdiv要素
var cont = null;
// 読み取り中止ボタンのbutton要素
var abrt = null;
// FileReaderインターフェースオブジェクト
var reader = null;

/* ----------------------------------------------------------------------*/
/* ページがロードされたときの処理                                        */
/* ----------------------------------------------------------------------*/
window.addEventListener("load", function() {
  // ドロップ領域のdiv要素
  dp = document.querySelector('#dp');
  // ファイルロード進捗表示領域のdiv要素
  prog = document.querySelector('#prog');
  // ファイル情報表示領域のdiv要素
  info = document.querySelector('#info');
  // ファイルの内容表示領域のdiv要素
  cont = document.querySelector('#cont');
  // 読み取り中止ボタンのbutton要素
  abrt = document.querySelector('#abrt');
  // dragoverイベントのイベントリスナーをセット
  dp.addEventListener("dragover",function(evt){
		evt.preventDefault();
	},false);
  // dropイベントのイベントリスナーをセット
  dp.addEventListener("drop",function(evt){
    evt.preventDefault();
    file_droped(evt);
  },false);
  // 中止ボタンにclickイベントのイベントリスナーをセット
  abrt.addEventListener("click",abort,false);
},false);
/* ----------------------------------------------------------------------*/
/* ファイルがドロップされたときの処理                                    */
/* ----------------------------------------------------------------------*/
function file_droped(evt){
  // 表示領域をクリア
  info.innerHTML = "";
  prog.innerHTML = "";
  cont.innerHTML = "";
  // ドロップされたファイルのFileインタフェースオブジェクト
  var file = evt.dataTransfer.files[0];
  if( !file ){
    info.innerHTML = "<p>ファイルをドロップして下さい。</p>";
    return;
  }
  // FileReaderインタフェースオブジェクト
  reader = new FileReader(); 
  // ファイルロードの進捗表示
  reader.onprogress = function(evt){
    if(evt.lengthComputable == true && evt.total>0){
      var rate = (evt.loaded * 100 / evt.total).toFixed(1);
      var msg = "";
      msg += evt.total + "バイト中、 ";
      msg += evt.loaded + "バイトをロードしました。";
      msg += "(" + rate + "%)";
      prog.innerHTML = msg;
    }
  }
  // プロパティを表示
  var msg = "";
  msg += "size: " + file.size + "\n";
  msg += "name: " + file.name + "\n";
  msg += "type: " + file.type + "\n";
  info.innerHTML = msg;
  // 画像ファイル(SVGも含む)の場合
  if( /^image/.test(file.type) ){
    reader.readAsDataURL(file);
    reader.onload = function(evt){
      var el = document.createElement("object");
      el.setAttribute("type",file.type);
      el.setAttribute("data",reader.result);
      cont.appendChild(el);
    }
  // ビデオファイルの場合
  }else if( /^video/.test(file.type) ){
    var el = document.createElement("video");
    if( !/^(maybe|probably)/.test(el.canPlayType(file.type)) ){
      return;
    }
    reader.readAsDataURL(file);
    reader.onload = function(evt){
      el.setAttribute("type",file.type);
      el.setAttribute("src",reader.result);
      el.setAttribute("controls",true);
    }
  // テキストファイルの場合
  }else if(/^text/.test(file.type)){
    reader.readAsText(file);
    reader.onload = function(evt){
      cont.appendChild(document.createTextNode(reader.result));
    }
  // 上記以外なら先頭の40バイト分を16進数表示
  }else{
    reader.readAsArrayBuffer(file);
    reader.onload = function(evt){
      var bytes = new Uint8Array(reader.result);
      var str = "";
      for( var i=0, len=Math.min(bytes.length,40); i<len; i++){
        str += ( "0" + bytes[i].toString(16) ).slice(-2);
        str += ( (i+1) % 16 == 0 ) ? "\n" : " ";
      }
      cont.appendChild(document.createTextNode(str));
    }
  }
}
/* ----------------------------------------------------------------------*/
/* ファイルのロードを中止                                                */
/* ----------------------------------------------------------------------*/
function abort(){
  if(reader == null){
    return;
  }
  reader.abort();
}
</script>
</HEAD>
<BODY>
<div id="dp">
 <div id="prog">ここにデスクトップ上のファイルをドロップしてください</div>
 <div><button id="abrt">読み取り中止</button></div>
 <div id="info"></div>
 <div id="cont"></div>
</div>

サンプル

ここにデスクトップ上のファイルをドロップしてください