[英]How to Upload a Full Folder with their files
I got this code for Upload multiple files but now I don't know how can I upload a folder with multiple files and maybe subfolder with more files.我得到了上传多个文件的代码,但现在我不知道如何上传包含多个文件的文件夹以及包含更多文件的子文件夹。 etc As you can see I'm using javscript for getting and php for procesing and saving the files right now with files around 2MB I was trying to get like $_Folder with a foreach but it doesn't work for me :/等正如你所看到的,我正在使用 javscript 来获取和 php 来处理和保存文件,文件现在大约为 2MB 我试图用 foreach 来获得像 $_Folder 一样的东西,但它对我不起作用:/
Index.html索引.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>
process.php进程.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);
}
}
upload.js上传.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);
});
});
Expecting to Upload something like this期待上传这样的东西
Upload:
-(1Folder)
--Image.png
--Imagen.jpg
--(2Folder)
---Image2.png
--(3Folder)
---Image3.jpg
--Imagen.gif
In modern Chrome, Firefox, and Edge you can set a html attribute, webkitdiretory
to let the file input become a directory select window instead.在现代 Chrome、Firefox 和 Edge 中,您可以设置 html 属性webkitdiretory
来让文件输入变成目录选择窗口。 And if you also use the multiple
attribute after selecting the folder all contents (and contents in subfolders) will be in the .files
list如果您在选择文件夹后还使用multiple
属性,则所有内容(以及子文件夹中的内容)都将在.files
列表中
<input type="file" webkitdirectory multiple>
You would then just use the same code to include all the files for upload.然后,您只需使用相同的代码来包含所有要上传的文件。
Now if you want to keep the folder structure you would have to also include the webkitRelativePath
which holds the relative path for that file within the folder you selected.现在,如果您想保留文件夹结构,您还必须包含webkitRelativePath
,它保存您选择的文件夹中该文件的相对路径。 And use that path to create the folders on the server.并使用该路径在服务器上创建文件夹。
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);
}
And then on the server use filePathParamName to make the directory structure and move the file to it:然后在服务器上使用 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)
For an easier method you could put all the files into a zip file within javascript and just upload the single zip file and extract on the server.对于更简单的方法,您可以将所有文件放入 javascript 中的 zip 文件中,然后上传单个 zip 文件并在服务器上提取。 Using JSZip and PHP ZipArchive class :使用 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);
});
});
Then in php unzip the folder to where you want it:然后在 php 中将文件夹解压缩到您想要的位置:
move_uploaded_file($file_tmp, $path);
$zip = new ZipArchive();
if($zip->open($path)){
$zip->extractTo($somepath);
$zip->close();
//delete zip file
unlink($path);
}
Client side demo of file listing using webkitRelativePath:使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.