CSS 是否可以使用HTML表单和PHP脚本上传文件夹

在本文中，我们将介绍如何使用HTML表单和PHP脚本上传文件夹。

阅读更多：CSS 教程

什么是文件上传

文件上传是指将文件从客户端（通常是计算机）传输到服务器的过程。在Web开发中，我们经常需要让用户上传文件，例如图片、视频、文档等。通常情况下，我们使用HTML表单和服务器端脚本来实现文件上传功能。

使用HTML表单上传文件夹

HTML表单的<input>标签有一个type属性，可以用来指定输入字段的类型。对于文件上传，我们需要将type属性设置为”file”。

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="folder" multiple directory webkitdirectory mozdirectory>
  <input type="submit" value="上传文件夹">
</form>

在上面的示例中，我们创建了一个表单，用于上传文件夹。enctype属性设置为”multipart/form-data”，这是一种指定表单数据以多部分（文件）进行编码的方式。

<input>标签的type属性设置为”file”，name属性设置为”folder”。我们还添加了multiple、directory、webkitdirectory和mozdirectory属性，以允许用户选择和上传文件夹。

当用户选择了文件夹后，我们可以使用JavaScript获取所选文件夹的路径，并在表单中显示文件夹名称。

const folderInput = document.querySelector('input[type="file"]');
folderInput.addEventListener('change', (event) => {
  const folder = event.target.files[0];
  document.getElementById('folder-name').textContent = folder.name;
});

在上面的示例中，我们添加了一个事件监听器，当文件夹选择时会触发change事件。我们通过event.target.files获取用户选择的文件夹，并将文件夹名称显示在一个具有id为”folder-name”的元素中。

使用PHP脚本处理上传文件夹

在上一步中，我们通过HTML表单将文件夹上传到服务器。现在，让我们来看一下如何使用PHP脚本处理上传文件夹。

$folderName = $_FILES['folder']['name'];
$folderPath = $_FILES['folder']['tmp_name'];

$targetPath = 'uploads/' . $folderName;

if(move_uploaded_file($folderPath, $targetPath)) {
  echo '文件夹已成功上传.';
} else{
  echo '上传文件夹失败，请重试.';
}

在上面的示例中，我们首先通过$_FILES数组获取上传的文件夹的名称和临时路径。然后，我们使用move_uploaded_file()函数将文件夹从临时路径移动到目标路径。如果移动成功，我们将显示”文件夹已成功上传”，否则将显示”上传文件夹失败，请重试”。

请确保在服务器上创建一个名为”uploads”的文件夹，用于存储上传的文件夹。