<!DOCTYPE html>
<html>
<head>
<title>Cloud Upload Icon</title>
<style>
#box {
width: 20rem;
height: 5rem;
backdrop-filter: blur(5px);
background-color: rgb(252, 252, 252);
border-radius: 1em;
border: 1px solid rgb(241, 241, 241);
position: relative;
user-select: none;
cursor: pointer;
margin: 1rem 2rem;
}
#box:hover > #drop {
display: block;
}
#cloud {
width: 82px;
height: 30px;
background: #e7f4fd;
background: -webkit-linear-gradient(top,#e7f4fd 5%,#ceedfd 100%);
border-radius: 25px;
position: relative;
margin: 33px auto 5px;
}
#cloud:before {
width: 45px;
height: 45px;
top: -22px;
right: 12px;
border-radius: 50px;
}
#cloud:after {
width: 25px;
height: 25px;
top: -12px;
left: 12px;
border-radius: 25px;
}
#cloud:before,
#cloud:after {
content: "";
background: #e7f4fd;
position: absolute;
z-index: -1;
}
#cloud span {
width: 87px;
position: absolute;
bottom: -2px;
background: #000;
z-index: -1;
box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
border-radius: 50%;
}
#drop {
width: 100%;
color: #999;
line-height: 5rem;
text-align: center;
position: absolute;
top: 0;
display: none;
}
</style>
<script>
onload = () => {
const file = document.createElement('input')
file.type = 'file'
file.onchange = event => {
for (const i of file.files) {
console.log('已获取文件：', i)
}
file.value = null
}
box.onclick = () => file.click()
let dragStats = 0
document.ondragover = e => {
e.preventDefault()
if(dragStats) return
drop.style.display = 'block'
}
document.ondragleave = e => {
e.preventDefault()
if(dragStats) return
dragStats = setTimeout(() => {
dragStats = 0
drop.style.display = ''
}, 1000)
}
document.ondrop = e => {
e.preventDefault()
dragStats = 0
drop.style.display = ''
const files = e.dataTransfer.files
for (const i of files) {
console.log('已获取文件：', i)
}
}
}
</script>
</head>
<body>
<div id="box">
<div id="cloud"><span></span></div>
<span id="drop">点击或拖拽音乐到此处共享您的音乐</span>
</div>
</body>
</html>