HTML5 Drag&Drop

こんにちわ。
職人見習いの小森です。

今回は、HTML5でのドラッグ&ドロップについてです。

○index.html

○main.css

#dropArea {
     cursor: pointer;
}

○dd.js

window.addEventListener("load",function(){
    var da = document.getElementById("dropArea");
    da.addEventListener("drop",function(evt){
    var fileList = evt.dataTransfer.files;
    for(var i = 0 ; i      if(window.FileReader && (fileList[i].type.indexOf("image/") == 0)){
        (function(fileObj){
          var reader = new FileReader();
          reader.onload = function(evt){
            var imageObj = new Image();
            imageObj.src = reader.result;
            image.width = 64;
            image.height= 64;
            da.appendChild(imageObj);
          }
          reader.readAsDataURL(fileObj);
        })(fileList[i]);
      }
    }
    da.style.backgroundColor="#eee";
  },true);

  da.addEventListener("dragenter",function(evt){
    evt.preventDefault();
    da.style.backgroundColor="#ecc";
  },true);

  da.addEventListener("dragleave",function(evt){
    evt.preventDefault();
    da.style.backgroundColor="#eee"; 
  },true);

  da.addEventListener("dragover",function(evt){
   evt.preventDefault();
  },true);

  window.addEventListener("drop",function(evt){
    evt.preventDefault();
  },true);

  window.addEventListener("dragover",function(evt){
    evt.preventDefault();
  },true);
},true);

デスクトップからブラウザにドラッグ＆ドロップされた複数のファイルから画像のみを表示します。

※この記事は、なかの人（spitz8008）が書いています。