轻松玩转拖拽上传文件和文件夹：现代网页开发必备技能

2023-09-09 02:56:48

概述

拖拽上传是允许用户通过简单地将文件或文件夹拖放到网页中来上传文件或文件夹的功能。这是一种非常直观和用户友好的方式，可以大大提高用户体验。

实现原理

拖拽上传功能的实现原理是：当用户将文件或文件夹拖放到网页中时，浏览器会触发一个拖放事件。我们可以通过监听这个事件来获取用户拖放的文件或文件夹。然后，我们可以使用JavaScript的XMLHttpRequest对象将文件或文件夹上传到服务器。

代码示例

// 监听拖放事件
document.addEventListener("drop", function(e) {
  // 阻止默认行为
  e.preventDefault();

  // 获取拖放的文件或文件夹
  var files = e.dataTransfer.files;

  // 遍历文件或文件夹
  for (var i = 0; i < files.length; i++) {
    // 如果是文件，则上传文件
    if (files[i].isFile) {
      uploadFile(files[i]);
    }
    // 如果是文件夹，则递归上传文件夹中的文件
    else if (files[i].isDirectory) {
      uploadDirectory(files[i]);
    }
  }
});

// 上传文件
function uploadFile(file) {
  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  // 打开一个POST请求
  xhr.open("POST", "upload.php");

  // 设置请求头
  xhr.setRequestHeader("Content-Type", "multipart/form-data");

  // 发送请求
  xhr.send(file);
}

// 递归上传文件夹中的文件
function uploadDirectory(dir) {
  // 获取文件夹中的文件
  var files = dir.files;

  // 遍历文件
  for (var i = 0; i < files.length; i++) {
    // 如果是文件，则上传文件
    if (files[i].isFile) {
      uploadFile(files[i]);
    }
    // 如果是文件夹，则递归上传文件夹中的文件
    else if (files[i].isDirectory) {
      uploadDirectory(files[i]);
    }
  }
}