我在創造我自己的& quotspotify & quot我希望用戶可以使用& lt輸入類型=文件& gt并將文件拖放到輸入框中。我已經學會了點擊輸入功能，但是我在拖放方面遇到了麻煩。 我想用普通的JS來制作。
我的HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/c9a62afcaf.js" crossorigin="anonymous"></script>
<script src="../js/musics.js" defer></script>
<link rel="stylesheet" href="../css/musics-style.css">
<title>Audio</title>
</head>
<body>
<div id="header">
<h2 id="title">Audio</h2>
<div id="options">
<a href="../../index.html">Home</a>
<a href="#">Upload Music</a>
<a href="#">PlayLists</a>
</div>
</div>
<div id="main">
<div id="send-files">
<div id="music-upload-list-container"></div>
<p class="text shown">Solte o arquivo aqui dentro ou clique para escolher.</p>
<svg xmlns="http://www.w3.org/2000/svg" class="svgs shown" height="4em" fill="white" viewBox="0 0 512 512"><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
<input type="file" accept="audio/mp3" id="input-file"/>
</div>
<button id="send">Fazer Upload</button>
</div>
<div id="controls">
<i id="icons" class="fa-solid fa-play"></i>
<dic id="music-info">
<img id="small-music-image" src="https://i.scdn.co/image/ab6761610000e5eb50defaf9fc059a1efc541f4c" alt="music-banner">
<p id="music-title">Guns N' Roses: Knockin on Heaven's Door</p>
<p id="time">0:00 - 3:20</p>
</dic>
</div>
</div>
</body>
</html>我的CSS:
/* Color-Pallete link -> https://colorhunt.co/palette/344d676eccafade792f3ecb0 */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Ubuntu', monospace, Arial, Helvetica, sans-serif;
overflow: hidden;
}
#header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
background-color: #24252A;
}
#title {
color: #ADE792;
padding-left: 50px;
font-size: 50px;
}
#main {
height: 100vh;
background-color: #24252A;
box-shadow: inset 1px 4px 12px #00000073;
}
#options {
display: flex;
align-items: right;
color: white;
padding-right: 100px;
}
#options a {
padding-right: 25px;
color: white;
text-decoration: none;
overflow: hidden;
}
#options a:hover {
color: #6ECCAF;
}
#send-files {
display: flex;
flex-direction: column;
border: 2px dashed #3f4147;
width: 40vw;
color: white;
text-align: center;
margin: 5vh auto;
padding: 15px 50px;
font-size: 18px;
transition: all .3s ease-in-out;
}
#send-files:hover {
cursor: pointer;
border: 2px dashed #55585f;
}
.svgs {
margin: 20px 0px;
}
.shown {
display: block;
}
.unshown {
display: none;
}
#input-file {
display: none;
position: absolute;
}
#music-upload-list-container {
display: none;
flex-direction: column;
flex-wrap: wrap;
}
#music-upload-list {
display: flex;
margin-bottom: 15px;
}
#music-upload-list p {
padding-left: 15px;
}
#send {
width: 15%;
margin: auto;
border: none;
background-color: #6ECCAF;
padding: 10px;
border-radius: 15px;
display: block;
transition: all .5s ease;
}
#send:hover {
cursor: pointer;
background-color: #28588b;
color: wheat;
}
#controls {
display: flex;
position: fixed;
bottom: 0;
background-color: black;
width: 100vw;
padding: 20px;
color: white;
justify-content: center;
align-items: center;
}
#music-info {
display: flex;
align-items: center;
margin-left: 60px;
}
#music-info p#music-title {
font-size: 18px;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
}
#music-info p#time {
margin-left: 25px;
}
#small-music-image {
width: 50px;
margin-right: 10px;
}
#icons {
padding: 10px;
background-color: white;
border-radius: 50%;
color: #28588b;
}
#icons:hover {
cursor: pointer;
color: #113458;
}我的JavaScript:
let musics = 0
// Make the click open the select file window
const fileInputBox = document.querySelector('#send-files')
const fileInput = document.querySelector('#input-file')
fileInputBox.addEventListener('click', () => {
fileInput.click()
})
// Make the box change it's content
fileInput.addEventListener('change', e => {
console.log(e.target.files[0].name)
hideElements()
showUploadList(e.target.files[0].name)
})
function hideElements() {
// Hide the container text
const p = document.querySelector('.text')
p.classList.remove('shown')
p.classList.add('unshown')
// Try to reduce the <svg> size
const svg = document.querySelector('.svgs')
svg.setAttribute('height', '2.5em')
// Reduce the container width
document.querySelector('#send-files').style.width = '30vw'
}
function showUploadList(files) {
// Check how many musics are getting uploaded
if (musics >= 5) return alert('Favor fazer o upload destas músicas para depois poder colocar outras!')
// Show the list container
const listDivContainer = document.querySelector('#music-upload-list-container')
listDivContainer.style.display = 'flex'
// Create the list div
const listDiv = document.createElement('div')
listDiv.setAttribute('id', 'music-upload-list')
listDivContainer.appendChild(listDiv)
// Add the <i> tag
const icon = document.createElement('i')
icon.classList.add('fa-solid')
icon.classList.add('fa-file-audio')
listDiv.appendChild(icon)
// Add the file name
const p = document.createElement('p')
p.innerText = files
listDiv.appendChild(p)
musics += 1
}
fileInputBox.addEventListener('drop', e => {
const dt = e.dataTransfer
const file = dt.files
console.log(file)
})感謝任何幫助！
我嘗試過使用拖放DOM API，但實際上我并沒有很好地理解它。 我制作了一個盒子，創建了drop和dragover/dragenter事件，當事件發生時，我登錄到控制臺。但是任何東西都顯示在控制臺上。