实现文件拖拽上传的方法和技巧

7 min read

实现文件拖动上传可以使用HTML5的File API。以下是实现步骤：

  1. 创建一个可以接受文件拖动的HTML元素。
<div id="drop_zone">将文件拖至此处上传</div>
  1. 监听dragover和drop事件，在dragover事件中阻止默认行为；在drop事件处理程序中，获取文件并调用上传函数。
let dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

function handleDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy';
}

function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  
  let files = evt.dataTransfer.files; // 获取文件
  uploadFiles(files); // 上传文件
}
  1. 编写上传函数，将文件上传到服务器。
function uploadFiles(files) {
  // 遍历文件列表，调用上传接口
  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    let url = '/uploadFile'; // 上传文件的URL
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    formData.append('file', file);

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('File uploaded successfully');
      }
    };

    xhr.open('POST', url, true);
    xhr.send(formData);
  }
}