当前位置:首页 > PHP

php实现上传文件夹

2026-01-29 07:02:40PHP

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

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

前端HTML部分

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

php实现上传文件夹

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

前端JavaScript处理

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

php实现上传文件夹

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
  • 考虑添加文件类型限制和安全检查
  • 对于大量文件建议分批次上传

替代方案

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

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

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

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

相关文章

vue实现图片压缩上传

vue实现图片压缩上传

实现图片压缩上传的方法 使用HTML5的Canvas进行压缩 通过Canvas的drawImage和toDataURL方法实现图片压缩。创建一个input元素用于选择图片,监听change事件处理压缩…

vue实现列表批量上传

vue实现列表批量上传

批量上传列表的实现方法 前端部分(Vue.js) 使用<input type="file">元素配合multiple属性实现多文件选择 <template> <d…

vue上传文档怎么实现

vue上传文档怎么实现

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

vue实现上传功能

vue实现上传功能

实现文件上传功能 在Vue中实现文件上传功能可以通过结合HTML的<input type="file">元素和JavaScript的FormData对象来完成。以下是一个基本的实现方法:…

vue怎么实现视频上传

vue怎么实现视频上传

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

vue实现拍摄视频上传

vue实现拍摄视频上传

Vue实现拍摄视频上传的方法 使用HTML5的<input type="file">和capture属性 在Vue模板中添加一个文件输入元素,通过capture属性指定使用摄像头拍摄视频:…