文件拖放

拖放

拖放是一种常见的特性，即抓取对象以后,从当前位置拖到另一个位置的过程。

dragenter

开始拖动

dragover

拖动中

dragleave

拖动放开

drop

拖动完成



html 元素 

<div id="target_box">把图片拖到这里试试</div>
<div id="show-drop" title="拖动的图片可以在这里显示出来"></div>

// js 部分

function addEventListener(dom,event,callback){
    if(typeof dom == "string"){
      document.querySelector(dom).addEventListener(event,callback);
    }else{
      dom.addEventListener(event,callback);
    }
}

//开始拖动
addEventListener(document,"dragenter",function(e){
  e.preventDefault();
  document.querySelector("#target_box").setAttribute("class","droping");
});

//拖动中
addEventListener(document,"dragover",function(e){
  e.preventDefault();
});

//拖放完成
addEventListener(document,"drop",function(e){
  e.preventDefault();
});

//拖放离开
addEventListener(document,"dragleave",function(e){
  e.preventDefault();
  document.querySelector("#target_box").setAttribute("class","");
});

//监听是否拖放当元素上后离开的
addEventListener("#target_box",'drop',function(e){
  e.preventDefault();//移除原有浏览器监听效果
  var dataTransfer = e.dataTransfer;//获取文件对象
  var files = dataTransfer.files[0];
  //获取文件后缀
  var match = files.name ? files.name.match(/\.([a-zA-Z]+)$/) || [] : false;
  var suffix = match ? match[1] : "";

  //如果后缀不是图片
  if(!suffix || ["jpg","jpeg","png","gif"].indexOf(suffix.toLocaleLowerCase()) < 0){
    return alert("你拖动的不是图片");
  }

  //读取文件的 base64 值
  var filereader = new FileReader();

  addEventListener(filereader,'load',function(ee){
    //获取 base64 编码
    var base64 = ee.target.result;
    var img = document.createElement("img");
    img.src = base64;
    //将图片添加到页面中
    document.querySelector("#show-drop").appendChild(img);
  });
  filereader.readAsDataURL(files);
});