拖拽的方式上传文件

原理

通常情况下，在没有任何设置的情况下，你将一个文件拖拽到一个网页上，松开鼠标后，浏览器会默认你的行为是想用浏览器打开你拖拽进去的文件，于是浏览器自动另起一个窗口打开你拖拽的文件，而我们需要的是读取文件信息，那么我们要做的第一件事情就是拦截捕获这个文件，让这个文件由我们自己来处理而不是由浏览器处理。这就需要两个事件，一个是dragover,另一个是drop。
dragover事件：绑定dragover事件的元素，在鼠标拖拽文件经过改元素时会触发这个事件
drop事件：绑定drop事件的元素，在鼠标拖拽文件在这个元素松开时候会触发这个事件。返回的event中有个dataTransfer对象，改对象里有个files属性，存放的就是用户拖拽的文件数组。
两个事件配合可以达到捕获文件拖拽事件的能力。

源码

可以复制源码运行体验一下

 <div id="drop">
   请把图片拖至于此
 </div>
 <div class="imgs"></div>

  #drop{
   width: 300px;
   height: 300px;
   border: 1px solid gray;
   line-height:300px;
   text-align: center;
   
 }
 .imgs{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
 }
 .imgs img{
   width: 25%;
 }

  let dropBox=document.querySelector('#drop');
 let imgsElem=document.querySelector('.imgs');
 dropBox.addEventListener('dragover',function(e){
   e.stopPropagation();
   e.preventDefault();
 })
 dropBox.addEventListener('drop',function(e){
   e.stopPropagation();
   e.preventDefault();
   let dataTransfer=e.dataTransfer;
   let files=dataTransfer.files;
   handleFiles(files)
 })
 function handleFiles(files){
   for(let file of files){
     if(/^image\//.test(file.type)){
       let img=document.createElement('img');
       imgsElem.appendChild(img);
       img.file=file;
       let reader=new FileReader();
       reader.onload=function(){
         img.src=reader.result;
       }
       reader.readAsDataURL(file)
     }
   }
 }