前言
想法：业务开发可能会用到第三方的组件或库，但如果要你手写一个拖拽文件功能你能搞定吗
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.upload-wrap {
margin: 100px auto;
border: 1px dashed #ccc;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
font-size: 20px;
}
.highlight {
background-color: pink;
}
</style>
</head>
<body>
<div
class="upload-wrap"
ondrop="handleDrop(event)"
ondragenter="handleDrop(event)"
ondragover="handleDrop(event)"
ondragleave="handleDrop(event)"
onclick="handleClick()"
>
<input
type="file"
style="display: none"
multiple
accept="*"
id="file"
onchange="handleChange(event)"
/>
<div class="upload-title">点击上传文件</div>
</div>
<script>
const handleDrop = (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
const type = e.type;
if (type === "dragenter" || type === "dragover") {
e.target.classList.add("highlight");
} else {
e.target.classList.remove("highlight");
}
if (!files[0]) return;
console.log(files);
};
const handleClick = () => {
const fileInput = document.getElementById("file");
fileInput.click();
};
const handleChange = (event) => {
console.log(event.target.files);
};
</script>
</body>
</html>
API
dragenter
- 当拖动的项目进入拖放目标区域时触发，会冒泡
dragover
- 当拖动的项目在拖放目标区域上悬停时持续触发，会冒泡
- 默认情况下，浏览器不会允许放置项目。通过阻止默认行为可以标记为允许放置
dragleave
- 当拖动的项目离开拖放目标区域时触发，会冒泡
drop
- 当拖动的项目放下到拖放目标区域时触发，会冒泡
- 默认情况下，浏览器可能会打开文件或执行其他默认操作。通过阻止默认行为可以处理自定义的放下操作
最后
如果要封装成拖拽文件上传组件，可增添限制文件类型以及文件大小，显示上传进度条等功能
标签：files,文件,const,拖动,冒泡,手写,type,拖拽,拖放 From： https://blog.csdn.net/hometowna/article/details/139336783