原生JavaScript实现多文件拖拽上传

前言

今天在使用joomla开发表单页面的时候，有一个拖拽文件上传。于是在这里总结了一下。

---

一、如何实现拖拽上传

这里需要使用到浏览器拖拽事件，拖拽事件有很多，这里我们只需要使用drop这个事件。

drop：鼠标在拖放目标上释放时，在拖放目标上触发，此时监听器需要收集数据并执行所需操作，如果是从操作系统拖放文件到浏览器，需要取消浏览器的默认行为。

二、使用步骤

拖拽区域html代码

      <div id="drop_area">
        <div>将您的产品附件拖拽到此处</div>
        <input class="upload" type="file" name="name" multiple="multiple"/>
        <div>请将文件控制在 100MB 以内</div>
      </div>

  
document.addEventListener("drop",function(e){  //拖离   
    e.preventDefault();      
})  
document.addEventListener("dragleave",function(e){  //拖后放   
    e.preventDefault();      
})  
document.addEventListener("dragenter",function(e){  //拖进  
    e.preventDefault();      
})  
document.addEventListener("dragover",function(e){  //拖来拖去    
    e.preventDefault();      
})  
box.addEventListener("drop",function(e){
    var fileList = Array.from(e.dataTransfer.files);
    fileList.forEach((item) => {
      if(Math.round(item.size / 1024 /1024) > 100){
        alert("文件内容超过100M，请重新上传");
        return;
      }
  },false)

这里fileList里面的就是你上传的文件，你只需要对数据进行简单分装，通过ajax发送给后台。

总结

在这里我有一个疑问，就是通过这种drop获取到的只有文件的名字大小以及格式，但是并没有路径。没有路径那么这个文件要怎么存储在后台呢？大家可以给我评论