H5新特性之拖拽文件

H5新增了drag事件，在H5中拖拽是十分常见的。

可以拖拽的分为页面内的和页面外的

页面内的一般默认可以拖拽的是img和a标签

页面外的常指的是文件

上代码吧~

let zoom = document.getElementById('drag_zoom');
zoom.addEventListener('dragenter',_=>{
  zoom.innerHTML = '释放鼠标~~';
},false)
zoom.addEventListener('dragleave',_=>{
  zoom.innerHTML = '请把文件拖到这里~~';
},false)
zoom.addEventListener('dragover',ev=>{
  ev.preventDefault();
},false)
zoom.addEventListener('drop',ev=>{
  console.log(ev.dataTransfer.files);
  zoom.innerHTML = '请把文件拖到这里~~';
  ev.preventDefault();
},false)

特别的是，dragover和drop都需要把浏览器的默认事件去除，其中一个没有去除都会导致浏览器直接读取该文件，而导致离开本页面

如果拖拽进来的是文件的话，ev.dataTransfer.files可以读取到拖拽进来文件的一些信息。

dataTransfer.files的结构如下：

可以看出，我们可以初步获取文件的name、type、size、lastModified这些属性

————————————————————————————————————————————————————————————————————————————-

配合FileReader读取文件，用法直接上代码

let fr = new FileReader();
fr.onload = function(){
     console.log(this.result);
}
fr.onerror = function(){
     alert('失败了~~');
}

div.addEventListener('drop',ev=>{
    fr.readAsText(ev.dataTransfer.files[0]);
    fr.readAsDataURL(ev.dataTransfer.files[0]);
    fr.readAsArrayBuffer(ev.dataTransfer.files[0]);
    fr.readAsBinaryString(ev.dataTransfer.files[0]);
},false)