如何利用JavaScript实现拖拽上传功能

html代码：

<div id="dropArea">
   <p class="drop-text">拖拽文件到此区域进行上传</p>
   <input type="file" id="fileInput">
</div>

js代码：

const dropArea = document.getElementById('dropArea');

// 添加拖拽区域的事件监听器
dropArea.addEventListener('dragover', handleDragOver);
dropArea.addEventListener('dragleave', handleDragLeave);
dropArea.addEventListener('drop', handleDrop);
function handleDragOver(e) {
  e.preventDefault();
  dropArea.classList.add('dragover');
}
 
function handleDragLeave(e) {
  e.preventDefault();
  dropArea.classList.remove('dragover');
}
 
function handleDrop(e) {
  e.preventDefault();
  dropArea.classList.remove('dragover');
   
  const files = e.dataTransfer.files;
   
  // 处理拖拽上传的文件
  handleUpload(files);
}
function handleUpload(files) {
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();
 
    reader.onload = function(e) {
      const fileData = e.target.result;
      // 在这里可以执行上传文件的相关操作，比如发送Ajax请求将文件传输到服务器
    };
 
    reader.readAsDataURL(file);
  }
}