H5 拖拽上传本地文件（原生实现）

实现思路：

1、利用H5的拖拽事件drop，获取当前拖拽的file
2、利用FileReader对象读取文件数据，实现缩略图
3、最后通过异步请求，上传文件（该文章不详讲这步）

实现效果：

支持拖拽本地文件进行上传，同时也支持常用的点击上传

实现代码：

HTML：

<div class="content">
  <label class="fileLabel" for="file">+</label>
  <input type="file" id="file"/>
</div>

CSS：

#file {
    
    
  display: none;
}
.fileLabel {
    
    
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 50px;
  border: 2px solid #999999;
  border-radius: 8px;
  color: #999999;
  overflow: hidden;
}
.fileLabel>img{
    
    
  width: 100%;
  height: 100%;
}

JS （核心代码）：

var fileLabel = document.querySelector(".fileLabel");
var fileInput = document.querySelector("#file");

// 拖拽事件绑定
fileLabel.addEventListener("dragenter", handleEvent);
fileLabel.addEventListener("dragover", handleEvent);
fileLabel.addEventListener("drop", handleEvent);
fileLabel.addEventListener("dragleave", handleEvent);

fileInput.addEventListener("change", e => filesToBlod(e.target.files[0]));

function handleEvent(e) {
    
    
  e.preventDefault()
  if (event.type === 'drop') {
    
    
    fileLabel.style.borderColor = '#999999'
    fileLabel.style.color = '#999999'
    filesToBlod(event.dataTransfer.files[0])
    filesUpload(event.dataTransfer.files[0])
  } else if (event.type === 'dragleave') {
    
    
    // 离开时边框恢复
    fileLabel.style.borderColor = '#999999'
    fileLabel.style.color = '#999999'
  } else {
    
    
    // 进入边框变为蓝色
    fileLabel.style.borderColor = 'blue'
    fileLabel.style.color = 'blue'
  }
}
// 文件处理函数
function filesToBlod(file) {
    
    
  if (!(/image/.test(file.type))) {
    
    
    alert("请上传图片")
    return
  }
  reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = e => {
    
    
    fileLabel.innerHTML = `<img src="${
      
      e.target.result}"/>`
  }
  // 文件读取失败的提示
  reader.onerror = () => {
    
    
    switch (reader.error.code) {
    
    
      case '1':
        alert('未找到文件')
        break
      case '2':
        alert('安全错误')
        break
      case '3':
        alert('读取被中断')
        break
      case '4':
        alert('文件不可读')
        break
      case '5':
        alert('编码错误')
        break
      default:
        alert('文件读取失败')
    }
  }
}
function filesUpload(file) {
    
    
  console.log('上传文件')
}