元素并添加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

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

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

相关文章

php实现上传

php实现上传

PHP 文件上传实现 HTML 表单设置 创建一个包含文件上传字段的 HTML 表单,确保表单的 enctype 属性设置为 multipart/form-data,这是文件上传必需的设置。 <…

jquery 上传

jquery 上传

jQuery 文件上传方法 使用 jQuery 实现文件上传可以通过多种方式完成,以下是常见的几种方法: 使用原生表单和 AJAX 创建一个包含文件输入的表单,并通过 jQuery 的 AJAX…

vue实现上传进度

vue实现上传进度

Vue 实现文件上传进度 在 Vue 中实现文件上传进度可以通过 XMLHttpRequest 或 axios 的 onUploadProgress 事件来监听上传进度。以下是两种常见实现方式: 使…

vue实现附件上传

vue实现附件上传

文件上传的基本实现 在Vue中实现文件上传可以通过原生HTML的<input type="file">元素结合Vue的数据绑定和事件处理来完成。创建一个文件上传组件,监听change事件获…

vue java实现分片上传

vue java实现分片上传

分片上传的实现原理 分片上传是将大文件分割成多个小块分别上传,最后在服务器合并的技术。这种方式能解决大文件上传超时、网络不稳定等问题,同时支持断点续传。 前端Vue实现 前端需要使用File API…

vue实现图片裁剪上传

vue实现图片裁剪上传

Vue 实现图片裁剪上传的方法 使用 vue-cropper 库 安装 vue-cropper 库: npm install vue-cropperjs 引入组件并设置基本配置: import V…