HTML 通过HTML表单上传整个目录

在本文中，我们将介绍如何通过HTML表单上传整个目录。在Web开发中，通常会遇到需要上传多个文件或整个目录的需求，而HTML标准并没有直接提供上传整个目录的功能。不过，我们可以借助一些技巧来实现这一功能。

阅读更多：HTML 教程

通过多文件选择实现上传整个目录

HTML的input元素提供了一个multiple属性，可以让用户一次选择多个文件进行上传。我们可以利用这个特性，让用户选择要上传的整个目录。以下是一个示例的HTML代码：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="files[]" multiple directory webkitdirectory mozdirectory/>
  <input type="submit" value="上传">
</form>

在上述代码中，input元素的multiple属性允许用户选择多个文件，directory、webkitdirectory和mozdirectory属性则表示可以选择整个目录。

当用户选择目录并提交表单后，选中的所有文件将会被上传到服务器的指定路径。

通过JavaScript实现上传整个目录

如果需要更高级的功能，例如在选择目录后自动递归上传目录下的所有文件，我们可以借助JavaScript。以下是一个使用JavaScript实现上传整个目录的示例代码：

<form action="/upload" method="post" enctype="multipart/form-data" id="upload-form">
  <input type="file" id="upload-input" name="files[]" multiple directory webkitdirectory mozdirectory style="display: none;">
  <input type="button" onclick="selectDirectory()" value="选择目录">
  <input type="submit" value="上传">
</form>

<script>
  function selectDirectory() {
    document.getElementById('upload-input').click();
  }

  document.getElementById('upload-form').addEventListener('submit', function(event) {
    event.preventDefault();
    var files = [];
    var input = document.getElementById('upload-input');
    var directory = input.files[0].webkitRelativePath.split('/').slice(0, -1).join('/');
    var reader = new FileReader();

    reader.onload = function() {
      var filenames = reader.result.split('\n');
      for (var i = 0; i < filenames.length; i++) {
        var file = filenames[i] ? directory + '/' + filenames[i] : '';
        files.push(file);
        // 这里可以将文件列表发送到服务器，或进行其他操作
      }
    };

    reader.readAsText(input.files[0]);

    // 清空input的文件列表
    input.value = '';

    console.log(files);
  });
</script>

在上述代码中，我们通过JavaScript来实现了选择目录并上传目录下所有文件的功能。当用户点击”选择目录”按钮时，会触发selectDirectory函数，该函数实际上是点击了隐藏的input元素，从而弹出文件选择对话框。

当用户选择目录并点击”上传”按钮时，submit事件被触发。我们在事件处理函数中对选择的目录进行处理，递归获取目录下的所有文件路径，并可以对文件列表进行处理或上传到服务器。