您好，我正在寻找将文件上传到文件夹的方法。
我在网站上有一个dropzone，我可以放置所有文件，然后上传它。但我需要的是选择哪个文件夹到哪个文件夹。
我想添加第三个按钮（选择选项）到哪个文件夹上传它。可能使用onChange事件。
知道如何只为一个文件做这个吗？
示例：
body.png START CANCEL FOLDER（图片） - 当我按开始时，它会上传到图片文件夹
styles.css START CANCEL FOLDER（css） - 当我按开始时，它会上传到css文件夹
上传脚本
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 2000000)
&& in_array($extension, $allowedExts)) {
if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
} else {
echo "Upload: " . $_FILES["file"]["name"] . "<br>";
echo "Type: " . $_FILES["file"]["type"] . "<br>";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " already exists. ";
} else {
move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/" . $_FILES["file"]["name"]);
echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
}
}
} else {
echo "Invalid file";
}
?>
Dropzone脚本：
<script>
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
url: "upload.php", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: "#previews", // Define the container to display the previews
clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
});
myDropzone.on("addedfile", function(file) {
// Hookup the start button
file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("sending", function(file) {
// Show the total progress bar when upload starts
document.querySelector("#total-progress").style.opacity = "1";
// And disable the start button
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function(progress) {
document.querySelector("#total-progress").style.opacity = "0";
});
// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actions .start").onclick = function() {
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector("#actions .cancel").onclick = function() {
myDropzone.removeAllFiles(true);
};
</script>
和身体构造：
<body>
<div class="container" id="container">
<h1>Dropzone.js</h1>
<br>
<br>
<div id="actions" class="row">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
</div>
<div class="col-lg-5">
<!-- The global file processing state -->
<span class="fileupload-process">
<div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</span>
</div>
</div>
<div class="table table-striped" class="files" id="previews">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button data-dz-remove class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-dz-remove class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</div>
</div>
</div>
答案 0 :(得分：0)
（仅限概念证明，需要进行大量改进，验证和安全措施。）
这会设置一个dropzone，需要＆＃34;提交所有文件＆＃34;上传开始前点击按钮。将文件添加到dropzone时，将加载包含文件夹名称的选择列表以及文件预览。为每个上载项选择一个文件夹名称，然后单击“提交”按钮。文件被上传，每个文件被引导到由其相应的文件夹选择列表指定的文件夹中。
form.html
<button id="submit-all">Submit all files</button>
<form action="upload.php" class="dropzone" id="my-dropzone"></form>
<script>
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
init: function() {
var submitButton = document.querySelector("#submit-all"),
myDropzone = this; // closure
submitButton.addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files
});
this.on('addedfile', function(file) {
var select = document.createElement('select');
select.setAttribute('name', 'folder[' + file.name + ']');
var option;
option = document.createElement('option');
option.innerHTML = 'images';
select.appendChild(option);
option = document.createElement('option');
option.innerHTML = 'css';
select.appendChild(option);
document.forms[0].appendChild(select);
});
}
};
</script>
upload.php的
<?php
if (!empty($_FILES)) {
$filename = $_FILES['file']['name'];
$fp = ( isset($_POST['folder'][$filename]) )? $_POST['folder'][$filename]: '';
$folder = ( 'images' == $fp || 'css' == $fp )? $fp: 'upload';
move_uploaded_file(
$_FILES['file']['tmp_name'],
dirname( __FILE__ ) . '/' . $folder . '/' . $filename
);
}
else { echo 'error: no file'; }
?>
附注：显而易见，dropzone会对上传的每个文件执行XHR操作。因此，对于上传的每个文件，表单中的每个元素（包括每个选择列表）都会附加到XHR的formData对象，从而导致冗余。