当前位置:首页 > PHP

php实现上传文件夹

2026-01-29 07:02:40PHP

实现文件夹上传的基本思路

PHP原生不支持直接上传整个文件夹,但可以通过前端配合实现。核心思路是前端将文件夹内的文件逐个上传,后端接收并保持原有目录结构。

前端HTML部分

使用HTML5的webkitdirectory属性让input可以选择文件夹:

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

前端JavaScript处理

通过File API读取文件夹内容并构建FormData:

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

    for (let i = 0; i < files.length; i++) {
        // 保留相对路径信息
        let relativePath = files[i].webkitRelativePath;
        formData.append('files[]', files[i], relativePath);
    }

    // 发送到服务器
    fetch('upload.php', {
        method: 'POST',
        body: formData
    });
});

PHP后端处理

接收文件并重建目录结构:

if (!empty($_FILES['files'])) {
    $basePath = 'uploads/';

    foreach ($_FILES['files']['name'] as $i => $name) {
        $tmpPath = $_FILES['files']['tmp_name'][$i];
        $relativePath = $_FILES['files']['name'][$i]; // 包含路径的文件名

        // 创建完整目录路径
        $fullPath = $basePath . dirname($relativePath);
        if (!file_exists($fullPath)) {
            mkdir($fullPath, 0777, true);
        }

        // 移动文件
        move_uploaded_file($tmpPath, $basePath . $relativePath);
    }

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

注意事项

  • 确保服务器上的uploads目录有写入权限
  • 大文件上传需要调整php.ini中的upload_max_filesize和post_max_size
  • 考虑添加文件类型限制和安全检查
  • 对于大量文件建议分批次上传

替代方案

对于更复杂的场景,可以考虑使用现成的库:

php实现上传文件夹

  • Dropzone.js 前端库
  • Plupload 多文件上传解决方案
  • WebSocket实现实时进度显示

这种方法虽然需要前端配合,但能有效实现文件夹上传功能,并保持原始目录结构。

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

相关文章

vue实现上传

vue实现上传

Vue 实现文件上传 在 Vue 中实现文件上传功能可以通过原生 HTML5 的 <input type="file"> 元素结合 Vue 的数据绑定和事件处理来实现。以下是几种常见的实现…

js实现文件的上传

js实现文件的上传

文件上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现文件上传功能。HTML部分需要包含一个文件选择控件和一个提交按…

vue实现图片重新上传

vue实现图片重新上传

实现图片重新上传功能 在Vue中实现图片重新上传功能,通常涉及文件选择、预览、上传和重置等步骤。以下是一个完整的实现方案: 模板部分 <template> <div>…

vue用户实现头像上传

vue用户实现头像上传

前端实现头像上传(Vue + Element UI) 环境准备 确保项目已安装element-ui和axios(或其他HTTP库): npm install element-ui axios 组件代…

vue java实现分片上传

vue java实现分片上传

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

vue实现图片裁剪上传

vue实现图片裁剪上传

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