实现页面的拖拽上传功能主要依赖BOM提供的拖拽事件接口和File API，通过监听用户在页面上的拖拽操作，获取拖入的文件数据，再结合传统的上传逻辑即可完成功能。整个过程不需要依赖额外的第三方库，原生API就能满足需求。
核心依赖的BOM相关接口
实现拖拽上传需要用到两类核心接口，一类是拖拽事件相关的接口，另一类是文件处理相关的File API，都是BOM标准的一部分。
拖拽事件接口
浏览器为可拖拽元素提供了多个事件，我们主要用到以下几个：
- dragenter：当被拖拽的元素进入目标区域时触发
- dragover：当被拖拽的元素在目标区域上方移动时持续触发
- dragleave：当被拖拽的元素离开目标区域时触发
- drop：当被拖拽的元素在目标区域松开时触发，这个事件是我们获取文件数据的关键
File API
当触发drop事件后，我们可以通过事件的dataTransfer属性获取到拖入的文件列表，这个属性是File API的一部分，里面包含了文件的名称、大小、类型等信息，还可以转成二进制数据用于上传。
完整实现步骤
1. 创建拖拽区域
首先需要在页面上创建一个用于接收拖拽文件的区域，设置一个明确的样式让用户知道这个区域可以拖拽上传。
<div id="dropArea">
将文件拖拽到这里上传
</div>
<style>
#dropArea {
width: 400px;
height: 200px;
border: 2px dashed #ccc;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #666;
margin: 20px auto;
}
#dropArea.active {
border-color: #409eff;
color: #409eff;
}
</style>
2. 监听拖拽事件
接下来需要给拖拽区域绑定对应的拖拽事件，处理拖拽过程中的样式变化和文件获取逻辑。
const dropArea = document.getElementById('dropArea');
// 阻止浏览器默认行为，避免拖拽文件时直接打开文件
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, (e) => {
e.preventDefault();
e.stopPropagation();
});
});
// 拖拽进入和移动时添加高亮样式
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, () => {
dropArea.classList.add('active');
});
});
// 拖拽离开时移除高亮样式
dropArea.addEventListener('dragleave', () => {
dropArea.classList.remove('active');
});
3. 获取拖拽的文件并上传
在drop事件中，我们可以通过e.dataTransfer.files获取到拖拽的文件列表，之后可以使用FormData封装文件数据，通过XMLHttpRequest或者fetch发起上传请求。
dropArea.addEventListener('drop', (e) => {
// 移除高亮样式
dropArea.classList.remove('active');
// 获取文件列表
const files = e.dataTransfer.files;
if (files.length === 0) {
return;
}
// 处理第一个文件，实际场景可以遍历处理多个文件
const file = files[0];
// 校验文件类型，这里示例只允许上传图片
if (!file.type.startsWith('image/')) {
alert('只能上传图片文件');
return;
}
// 封装上传数据
const formData = new FormData();
formData.append('file', file);
formData.append('filename', file.name);
// 发起上传请求
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://ipipp.com/upload');
// 监听上传进度
xhr.upload.addEventListener('progress', (progressEvent) => {
if (progressEvent.lengthComputable) {
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
console.log(`上传进度：${percent}%`);
}
});
// 监听上传完成
xhr.addEventListener('load', () => {
if (xhr.status === 200) {
console.log('上传成功', JSON.parse(xhr.responseText));
} else {
console.log('上传失败');
}
});
// 发送请求
xhr.send(formData);
});
注意事项
- 必须阻止拖拽事件的默认行为，否则浏览器会默认打开拖拽的文件，导致上传逻辑无法执行
- drop事件只有在dragover事件中阻止了默认行为才会触发，这个是很多开发者容易忽略的点
- 如果要支持多文件上传，只需要遍历
e.dataTransfer.files列表，逐个处理即可 - 如果需要兼容旧版本浏览器，需要先判断File API和拖拽事件是否支持，不支持的情况下可以给出提示或者降级为传统文件选择上传
常见问题解答
为什么拖拽文件后没有触发drop事件？
通常是因为没有在dragover事件中阻止默认行为，浏览器默认会禁止drop事件的触发，只需要在dragover的事件处理函数中调用e.preventDefault()即可解决。
如何获取拖拽文件的本地路径？
出于安全考虑，BOM的File API不会暴露文件的本地路径，我们只能获取到文件的内容数据和基本的元信息，无法直接获取本地路径，如果需要路径信息，需要让用户通过文件选择器主动选择文件。
BOM拖拽上传JavaScriptFile_APIHTML5修改时间：2026-06-13 14:27:30