如何上傳包含文件的完整文件夾

Question

我得到了上傳多個文件的代碼，但現在我不知道如何上傳包含多個文件的文件夾以及包含更多文件的子文件夾。 等正如你所看到的，我正在使用 javscript 來獲取和 php 來處理和保存文件，文件現在大約為 2MB 我試圖用 foreach 來獲得像 $_Folder 一樣的東西，但它對我不起作用：/

索引.html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Upload Files</title> </head> <body> <form method="post" enctype="multipart/form-data"> <input type="file" name="files[]" multiple> <input type="submit" value="Upload File" name="submit"> </form> <script src="upload.js"></script> </body> </html>

進程.php

<?php 
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['files'])) {
        $errors = [];
        $path = 'uploads/';
    $extensions = ['jpg', 'jpeg', 'png', 'gif'];

        $all_files = count($_FILES['files']['tmp_name']);
        for ($i = 0; $i < $all_files; $i++) {  
        $file_name = $_FILES['files']['name'][$i];
        $file_tmp = $_FILES['files']['tmp_name'][$i];
        $file_type = $_FILES['files']['type'][$i];
        $file_size = $_FILES['files']['size'][$i];
        $file_ext = strtolower(end(explode('.', $_FILES['files']['name'][$i])));
        $file = $path . $file_name;
        if (!in_array($file_ext, $extensions)) {
            $errors[] = 'Extension not allowed: ' . $file_name . ' ' . $file_type;
        }
        if ($file_size > 2097152) {
            $errors[] = 'File size exceeds limit: ' . $file_name . ' ' . $file_type;
        }
        if (empty($errors)) {
            move_uploaded_file($file_tmp, $file);
        }
    }
    if ($errors) print_r($errors);
    }
}

上傳.js

const url = 'process.php';
const form = document.querySelector('form');

form.addEventListener('submit', e => {
    e.preventDefault();

    const files = document.querySelector('[type=file]').files;
    const formData = new FormData();

    for (let i = 0; i < files.length; i++) {
        let file = files[i];

        formData.append('files[]', file);
    }

    fetch(url, {
        method: 'POST',
        body: formData
    }).then(response => {
        console.log(response);
    });
});

期待上傳這樣的東西

Upload:
-(1Folder)
--Image.png
--Imagen.jpg
--(2Folder)
---Image2.png
--(3Folder)
---Image3.jpg
--Imagen.gif

Answer 1

在現代 Chrome、Firefox 和 Edge 中，您可以設置 html 屬性webkitdiretory來讓文件輸入變成目錄選擇窗口。 如果您在選擇文件夾后還使用multiple屬性，則所有內容（以及子文件夾中的內容）都將在.files列表中

<input type="file" webkitdirectory multiple>

然后，您只需使用相同的代碼來包含所有要上傳的文件。

現在，如果您想保留文件夾結構，您還必須包含webkitRelativePath ，它保存您選擇的文件夾中該文件的相對路徑。 並使用該路徑在服務器上創建文件夾。

for (let i = 0; i < files.length; i++) {
    let file = files[i];
    let fileParamName = `file${i}`;
    let filePathParamName = `filepath${i}`;
    formData.append(fileParamName, file);
    formData.append(filePathParamName,file.webkitRelativePath);
}

然后在服務器上使用 filePathParamName 創建目錄結構並將文件移動到它：

//Just for example
//make sure to used sanitized data in production
$folderpath = $path.dirname($_POST["filepath23"]);
$file = $path.$_POST["filepath23"];
$file_tmp = $_FILES["file23"]["tmp_name"];

//third option is for recursive folder creation (make subfolders)
mkdir($path,0644,true);
move_uploaded_file($file_tmp, $file)

對於更簡單的方法，您可以將所有文件放入 javascript 中的 zip 文件中，然后上傳單個 zip 文件並在服務器上提取。 使用 JSZip和PHP ZipArchive 類：

var zip = new JSZip();
for (let i = 0; i < files.length; i++) {
    let file = files[i];
    zip.file(file.webkitRelativePath, file);
}
zip.generateAsync({type:"blob"})
   .then(function(content) {
     formData.append("folderzip",content);
     fetch(url, {
       method: 'POST',
       body: formData
     }).then(response => {
       console.log(response);
     }); 
   });

然后在 php 中將文件夾解壓縮到您想要的位置：

move_uploaded_file($file_tmp, $path);
$zip = new ZipArchive();
if($zip->open($path)){
  $zip->extractTo($somepath);
  $zip->close();
  //delete zip file
  unlink($path);
}

使用 webkitRelativePath 的文件列表的客戶端演示：

 var output = document.querySelector("#output"); document.querySelector("input").onchange = function() { var files = this.files; for (file of files) { output.insertAdjacentHTML('beforeend', `<div>${file.webkitRelativePath}</div>`); } }

 <input type="file" webkitdirectory multiple> <div id="output"></div>

如何上傳包含文件的完整文件夾

問題描述

1 個解決方案

解決方案1
6 已采納 2019-09-01 20:50:21

如何上傳包含文件的完整文件夾

問題描述

1 個解決方案

解決方案1 6 已采納 2019-09-01 20:50:21

解決方案1
6 已采納 2019-09-01 20:50:21