基于JavaScript实现拖拽上传功能

   
拖拽文件到此区域进行上传
   

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);
   }
}

#dropArea {
   width: 300px;
   height: 200px;
   border: 2px dashed #aaa;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

#dropArea.dragover {
   border-color: #42b983;
}

.drop-text {
   margin-bottom: 10px;
}