在浏览器中使用文件输入框上传整个文件夹是否可行?
我搜索了一下,发现这可能是浏览器的限制,可能需要使用Java Applet或Flash。
在浏览器中使用文件输入框上传整个文件夹是否可行?
我搜索了一下,发现这可能是浏览器的限制,可能需要使用Java Applet或Flash。
使用webkitdirectory已经成为可能。
<input type="file" webkitdirectory directory multiple />
自Firefox 50、Chrome 30、Safari 11.1、Edge 14起就被支持,但截至2019年在大多数移动浏览器上不支持:https://caniuse.com/#feat=input-file-directory
请尝试以下方法上传文件夹:
<form method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="files" multiple="" directory="" webkitdirectory="" mozdirectory="">
<input class="button" type="submit" value="Upload" />
</form>
$count = 0;
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
foreach ($_FILES['files']['name'] as $i => $name) {
if (strlen($_FILES['files']['name'][$i]) > 1) {
if (move_uploaded_file($_FILES['files']['tmp_name'][$i], 'folder/'.$name)) {
$count++;
}
}
}
}
`
似乎无法仅使用PHP上传文件夹,但Javascript可以检测到文件夹,因此我通过以下两个步骤解决了这个问题:
Create a Javascript function that reads the directory and files that will be uploaded and add this to a array(I called this Filestructure) that will be sent together with POST. For example:
{
'foldername/': {'file1.txt','file2.txt},
'foldername/folder2': {'foo.txt', 'bar.png'}
}
在Dropzone.js中已经有一个类似的功能可以处理这个问题,不过我需要修改(_addFilesFromDirectory() )。但是你可以自己创建一个函数来处理这个问题。如果你需要更多帮助,请参考https://dev59.com/6nnZa4cB1Zd3GeqPwvZF#20431117。
In Php you should first let your files be uploaded to a certain folder where they will be stored temporary. After your files has been uploaded you then need to pass your javascript array to your phpcode. There you need to iterate the array and create the folders and then move your uploaded files from the temporary folder to their respective location. For example:
$_filetree = $_POST['filetree'];
function createFoldersAndMoveFiles($_filetree)
{
$nFolders = count($_filetree);
foreach ($_filetree as $folder => $files) {
createFolder($folder);
moveFiles($files, $folder);
}
}
function moveFiles($_files, $_folder) {
$source = 'tmpuploads/';
$destination = 'mypath/';
$nFiles = count($_files);
for($i = 0; $i < $nFiles; $i++) {
$file = $_files[$i];
rename($source . $file, $destination .$_folder. '/' .$file);
}
}
function createFolder($foldername) {
$folders = explode("/", $foldername);
$path = 'mypath/';
$nFolders = count($folders);
for($i = 0; $i < $nFolders; $i++){
$newFolder = '/' . $folders[$i];
$path .= $newFolder;
if (!file_exists($path) && !is_dir($path)) {
mkdir($path);
}
}
}
要在PHP中上传文件夹,请按照以下步骤进行操作:
<form id="form1" action="myCurrent.php" method="post">
<label>Upload All Files From Folder</label> <br/>
<input id="input" name="input[]" type="file" multiple webkitdirectory >
<div id="errorBlock" class="help-block"></div> <br/>
<input type="submit" name="btnDesFolder" id="btnDesFolder" value="send file" />
</form>
<?php
if(isset($_POST['btnDesFolder'])){
$myFiles = $_POST['input-folder-2'];
if(isset($_POST['input-folder-2'])){
$files = scandir("path/to/your/folder");
$oldfolder = "path/to/your/folder/";
$newfolder = "path/to/new/folder";
foreach($files as $fname) {
if($fname != '.' && $fname != '..' && $fname != 'index.php') {
rename($oldfolder.$fname, $newfolder.$fname);
}
}
}
}
?>
tar
的工具将目录打包成一个文件,然后上传。但是要小心,你可能会超过默认设置为2MB的php上传最大限制。不过这个限制是可以配置的。请参考swfupload - 一种基于Flash的上传多个文件的方式。无论如何,无法上传整个文件夹,只能上传文件夹中的所有文件。
如果您使用Dropzone: Dropzone会扫描放置的目录及其子目录中的文件,并为每个文件向后端发出请求。 该文件的原始完整路径被捕获。
https://www.dropzonejs.com/#event-sending
注:此示例使用了 lodash (_.without):
sendingEvent(file, xhr, formData){
if (file.fullPath) { //file.fullPath only exist if file is inside a directory
var directoryStructure = _.without(file.fullPath.split("/"), file.name);
formData.append('directory-structure', directoryStructure.join(",") );
}
}
您在请求中收到了以下内容:
现在您可以在后端处理此文件夹名称。 Dropzone 可以单独进行多个上传,没有问题,并且对您的用例非常有效。
multiple
与webkitdirectory
或directory
不兼容。 - Apul Gupta