元素并添加webkitdire…">
当前位置:首页 > PHP

php实现上传文件夹

2026-04-03 13:14:17PHP

在PHP中实现上传文件夹功能需要结合前端的多文件选择和后端的递归处理。以下是具体实现方法:

前端部分

使用HTML5的<input type="file">元素并添加webkitdirectorydirectory属性以支持文件夹上传:

<input type="file" id="folderUpload" webkitdirectory directory multiple>

通过JavaScript获取文件夹结构并上传:

document.getElementById('folderUpload').addEventListener('change', function(e) {
    const files = e.target.files;
    const formData = new FormData();

    for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i], files[i].webkitRelativePath);
    }

    fetch('upload.php', {
        method: 'POST',
        body: formData
    });
});

后端处理

在PHP中接收并处理文件夹结构:

if (isset($_FILES['files'])) {
    $uploadDir = __DIR__ . '/uploads/';

    foreach ($_FILES['files']['name'] as $key => $name) {
        $relativePath = $_FILES['files']['webkitRelativePath'][$key];
        $fullPath = $uploadDir . dirname($relativePath);

        if (!file_exists($fullPath)) {
            mkdir($fullPath, 0777, true);
        }

        move_uploaded_file(
            $_FILES['files']['tmp_name'][$key],
            $fullPath . '/' . basename($name)
        );
    }

    echo "文件夹上传成功";
}

注意事项

现代浏览器(Chrome、Edge、Firefox)支持文件夹上传,但Safari支持有限

上传大文件夹时需要设置PHP配置:

ini_set('upload_max_filesize', '1024M');
ini_set('post_max_size', '1024M');
ini_set('max_execution_time', '600');

安全性方面应添加文件类型验证:

$allowedTypes = ['image/jpeg', 'application/pdf'];
if (!in_array($_FILES['files']['type'][$key], $allowedTypes)) {
    continue;
}

替代方案

对于不支持文件夹上传的浏览器,可以考虑使用第三方库如:

php实现上传文件夹

  • Dropzone.js
  • Fine Uploader
  • Plupload

这些库提供更完整的文件夹上传解决方案,包括进度显示和错误处理功能。

标签: 文件夹上传
分享给朋友:

相关文章

js实现文件夹

js实现文件夹

使用JavaScript创建文件夹 在浏览器端的JavaScript中无法直接操作文件系统创建文件夹,这是出于安全考虑。但在Node.js环境中可以通过文件系统模块(fs)实现。 Node.js中使…

vue实现拖拽上传

vue实现拖拽上传

Vue 拖拽上传实现方法 使用 HTML5 原生拖拽 API 在 Vue 中可以通过监听原生拖拽事件实现基础功能: <template> <div class="dr…

vue实现上传封面

vue实现上传封面

Vue 实现上传封面功能 使用原生 input 文件上传 在 Vue 中可以通过原生 HTML 的 input 元素实现文件上传功能。创建一个文件输入框,监听 change 事件获取用户选择的文件。…

vue上传文档怎么实现

vue上传文档怎么实现

使用原生 <input type="file"> 实现上传 在 Vue 模板中添加一个文件输入框,绑定 change 事件处理文件选择: <input type="file" @c…

vue怎么实现视频上传

vue怎么实现视频上传

实现视频上传功能 在Vue中实现视频上传功能通常需要结合HTML5的<input type="file">元素和后端API。以下是实现方法: 前端实现 创建文件上传组件模板: <…

mac上如何找到react文件夹

mac上如何找到react文件夹

使用 Finder 搜索 打开 Finder,在顶部菜单栏选择“前往”>“前往文件夹”(或使用快捷键 Command + Shift + G)。输入路径 ~/ 进入用户主目录,手动浏览项目文件夹…