sample: detect dropped image properties via FileReader object

by sii_side

HTML

<div id="bbb"></div>

CSS

#bbb {
  width: 200px;
  height: 200px;
  background-color: #fcc;
}

JavaScript

var element = document.getElementById("bbb");

element.addEventListener("dragover", function(e) {
  e.preventDefault();
});

element.addEventListener("drop", function(e) {
  e.preventDefault();
	e.stopPropagation();

	var data_transfer = e.dataTransfer;

  var file_list = data_transfer.files;
  if (!file_list) return;

  var i;
  var num = file_list.length;
  for (i = 0; i < num; i++) {
    var file = file_list[i];

		//ドラッグ＆ドロップされたファイルを実際に読み込むためのオブジェクト
		var fr = new FileReader();
    
    //ファイル読み込み完了時のイベントリスナ
    fr.addEventListener("load", function(e) {
    	var img = new Image();
      
      //さらに画像としての読み込みを待機
      //（ここは場合によって不要かもしれませんが、念のため）
      img.addEventListener("load", function() {
      	console.log(img.width);
        console.log(img.height);
      });

			//DataURLをsrcにセットする
			img.src = e.target.result;
    }, false);
    
    //1ファイル読み込み開始
		fr.readAsDataURL(file);
  }
});