在日常开发中，我们经常看到一些网站支持“拖拽上传”功能，比如你打开某个文件管理后台，可以直接把本地文件拖进页面，它就自动上传了。

这个体验非常丝滑，也显得“高级”。

但你有没有想过：这个功能到底是怎么实现的？

今天我们就来一起拆解一下：JS 拖拽上传的完整原理与实现方式。

✨一、什么是拖拽上传？

简单来说，拖拽上传 就是让用户可以拖动文件到浏览器页面的某个区域，自动触发上传，而不是通过 <input type="file"> 的传统点击方式。

虽然本质上最终还是上传文件，但用户交互方式变了，这就涉及到浏览器的一套“拖放事件机制”。

🧠二、核心原理拆解

想实现拖拽上传，需要用到以下几个关键点：

1. 拖拽事件的监听

浏览器提供了一系列拖拽相关事件：

2. 阻止默认行为（非常关键）

浏览器默认会在 drop 时打开文件，所以我们必须阻止默认行为：

e.preventDefault();

否则你一拖文件进页面，页面就直接跳转去预览了...

3. 从 drop 中读取文件

当你在 drop 事件里获取到事件对象 e 时，可以通过：

e.dataTransfer.files

来读取用户拖进来的文件列表。

这和传统 input 方式中的 input.files 是一样的东西，只不过来源不同。

🛠️三、完整实现思路（HTML + JS）

下面我们来写个最简版的拖拽上传 DEMO，只用于展示流程：

<div id="drop-area" style="width: 300px; height: 200px; border: 2px dashed #ccc; text-align: center; line-height: 200px;">
  拖拽文件到这里上传
</div>

<script>
  const dropArea = document.getElementById('drop-area');

// 拖进来：添加高亮
  dropArea.addEventListener('dragenter', (e) => {
    e.preventDefault();
    dropArea.style.borderColor = '#3eaf7c';
  });

// 拖动中：必须阻止默认，才能触发 drop
  dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

// 拖出：恢复样式
  dropArea.addEventListener('dragleave', (e) => {
    e.preventDefault();
    dropArea.style.borderColor = '#ccc';
  });

// 放下文件：读取文件
  dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    dropArea.style.borderColor = '#ccc';

    const files = e.dataTransfer.files;

    // 遍历文件列表
    for (let file of files) {
      console.log('文件名:', file.name);
      uploadFile(file); // 上传逻辑
    }
  });

// 模拟上传函数
functionuploadFile(file) {
    const formData = newFormData();
    formData.append('file', file);

    fetch('/api/upload', {
      method: 'POST',
      body: formData
    }).then(res => {
      if (res.ok) {
        console.log(`${file.name} 上传成功`);
      } else {
        console.error(`${file.name} 上传失败`);
      }
    });
  }
</script>

✅四、进阶点补充

1. 拖拽区域可以是任意 DOM 元素，不一定是整个页面。

你甚至可以让 <textarea> 接收拖拽的文件（比如 markdown 图片粘贴上传）。

2. e.dataTransfer.items 可以识别是不是文件夹

for (let item of e.dataTransfer.items) {
  if (item.kind === 'file') {
    const entry = item.webkitGetAsEntry();
    if (entry.isDirectory) {
      console.log('是个文件夹');
    }
  }
}

3. 拖拽上传配合组件库用法（如 Vue + Element Plus）

Element Plus 的 <el-upload> 组件就内置了 drag 模式，原理跟我们上面说的是一样的，只是封装好了。

🧩五、总结

我们回顾一下拖拽上传的核心实现：

1. 1. 监听 dragenter, dragover, drop 等事件；
2. 2. 阻止默认行为，避免浏览器打开文件；
3. 3. 从 e.dataTransfer.files 读取文件；
4. 4. 手动构造 FormData 上传文件；
5. 5. 增强体验：拖拽高亮、上传进度、错误提示等。

虽然概念简单，但这就是一个非常实用的 Web 技能，做后台系统、CMS、富文本编辑器、前端可视化工具时经常会用到。