Javascript 如何上载完整文件夹及其文件

我得到了上传多个文件的代码，但现在我不知道如何上传一个包含多个文件的文件夹，可能还有包含更多文件的子文件夹。等 如您所见，我现在使用javscript获取文件，使用php处理和保存文件，文件大小约为2MB 我试图用foreach获取类似$\u的文件夹，但它对我不起作用：/

Index.html

---

在现代的Chrome、Firefox和Edge中，您可以设置一个html属性，让文件输入变成一个目录选择窗口。如果在选择文件夹后还使用了

多个

属性，则所有内容（以及子文件夹中的内容）都将出现在

文件

列表中

<input type="file" webkitdirectory multiple>

然后在服务器上使用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文件并在服务器上解压缩即可。以及：

---

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

var output=document.querySelector（“输出”）；
document.querySelector（“输入”）.onchange=function（）{
var files=this.files；
用于（文件的文件）{
insertAdjacentHTML（'beforeend'，`${file.webkitRelativePath}`）；
}
}

出于安全原因，您不能通过html和javascript选择完整文件夹。您只能选择文件。@Denhell您确实不能选择整个文件夹，但我认为这与浏览器和HTTP的工作方式有关，而与安全性无关。你在哪里读到的安全限制？根据浏览器的用户界面和上载控件，尽管您可以进入文件夹并按Ctrl+a同时选择所有文件，但也可以选择其他方法？@MiguelAngelEsparzaCalero根据浏览器的用户界面和上载控件，尽管您可以进入文件夹并按Ctrl+a同时选择所有文件。或者另一个明显的选择是把你需要的所有文件放在一个ZIP文件中，然后上传。你能确认这是我在生产中可以信任的吗？这正是我所期待的使用预先签名的URL将文件夹上传到AWS s3。先谢谢你。

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

<input type="file" webkitdirectory multiple>

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);
}

//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)

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);
     }); 
   });

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