webkitdirectory实现文件夹上传，保留目录结构

在HTML5中，可以使用`<input type="file" webkitdirectory>`来实现文件夹上传。这个属性告诉浏览器，上传的不是单个文件，而是一个文件夹，同时保留了该文件夹的目录结构。以下是一个简单的示例：

<input type="file" webkitdirectory multiple>

其中，`multiple`属性表示可以选择多个文件夹上传，因为有些浏览器不支持同时选择多个文件夹，所以这个属性并不是必须的。

在上传文件时，需要使用JavaScript来处理上传的文件夹及其子文件夹中的所有文件。可以使用`FileReader`对象来读取文件夹中的文件，并使用XMLHttpRequest对象将其上传到服务器。以下是一个简单的实现示例：

function uploadFiles() {
  var input = document.querySelector('input[type="file"]');
  var files = input.files;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    if (file.type.match(/image.*/)) {
      var reader = new FileReader();
      reader.onload = function(evt) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true);
        xhr.send(evt.target.result);
      };
      reader.readAsDataURL(file);
    }
  }
}

在这个示例中，我们使用了`FileReader`对象来读取文件，然后使用XMLHttpRequest对象将其上传到服务器。需要注意的是，这个示例只上传了图片文件。如果需要上传其他类型的文件，需要相应调整代码。